Deprecate package, do not use

[oliviertassinari]

Considering that https://github.com/oliviertassinari/react-swipeable-views/issues/558 has been up for 3 years with no real progress on finding a maintainer to take over the ownership of this project, I think that it's time to start the deprecation process of it. This issue is the first step, it will help the community coordinate on who to remove this dependence.

Next, we will need to:

1. Remove the reference of the dependency in https://github.com/mui/material-ui/issues/33274
2. Deprecate the package on npm
3. Freeze this GitHub repository

Thanks everyone!

[twltwl]

If this is being deprecated, any suggestions of good alternatives?

[u12206050]

https://www.npmjs.com/package/react-swipeable-views-react-18-fix

[flying-sheep]

If this is being deprecated, any suggestions of good alternatives?

• Swiper (https://github.com/mui/material-ui/issues/33274#issuecomment-1219322687)
• Embla Carousel (https://github.com/oliviertassinari/react-swipeable-views/pull/668#issuecomment-1255277305)
• react-slide-routes (as a replacement for react-swipeable-routes)

[oliviertassinari]

As a side note, at MUI, we have the plan to bring a native carousel component into MUI's product: https://github.com/mui/material-ui/issues/33392, https://github.com/mui/mui-x/issues/3601.

I don't know if we will start from my project (react-swipeable-views), it will be up to the engineering of the team who takes ownership of it.

[phaux]

I replaced usage of this library with my own tiny implementation and it is working just fine for me:

import { useEffect, useRef } from "react"

export function SwipeableViews(
  { className = "", index, onChangeIndex, ...rootProps }: 
    { index: number, onChangeIndex: (index: number) => void } & React.HTMLProps<HTMLDivElement>
) {
  const containerRef = useRef<HTMLDivElement>(null)
  const scrollTimeout = useRef<number>()

  useEffect(() => {
    containerRef.current?.children[index]?.scrollIntoView({ behavior: "smooth" })
  }, [index])

  return (
    <div
      {...rootProps}
      ref={containerRef}
      className={
        "flex snap-x snap-mandatory overflow-x-scroll " +
        "*:w-full *:flex-shrink-0 *:snap-center *:snap-always " + className
      }
      onScroll={({ currentTarget }) => {
        if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
        scrollTimeout.current = window.setTimeout(() => {
          const pageWidth = currentTarget.scrollWidth / currentTarget.children.length
          onChangeIndex(Math.round(currentTarget.scrollLeft / pageWidth))
        }, 100)
      }}
    />
  )
}

~~It doesn't add aria-hidden attribute automatically, but you can add it to the slides at usage side.~~ (see codesandbox)

It also doesn't animate container's height. The height is just max height of children. You can give max-height to children and make them scrollable instead.

It probably doesn't work in react-native, because it uses scroll-snap.

Codesandbox (version without tailwind) (edit: updated with more features)

Edit2: I made a library

[croraf]

@phaux can you make this a library on npm?

[phaux]

@phaux can you make this a library on npm?

Maybe. In the meanwhile you can just copy SwipeableViews.tsx and SwipeableViews.css from the CodeSandbox into your project.

Edit: Here's the library