Deprecate package, do not use about react-swipeable-views HOT 7 OPEN

As a side note, at MUI, we have the plan to bring a native carousel component into MUI's product: mui/material-ui#33392, mui/mui-x#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.

from react-swipeable-views.

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

from react-swipeable-views.

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

from react-swipeable-views.

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

from react-swipeable-views.

@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

from react-swipeable-views.

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

• Swiper (mui/material-ui#33274 (comment))
• Embla Carousel (#668 (comment))
• react-slide-routes (as a replacement for react-swipeable-routes)

from react-swipeable-views.

@phaux can you make this a library on npm?

from react-swipeable-views.