React Spring Carousel

useTransitionCarousel

Most of the properties/behaviors are shared between useSpringCarousel and useTransitionCarousel; I suggest to check the first one for a complete overview of the capabilities of the library.

Start using the carousel is simple!


  import { useTransitionCarousel } from 'react-spring-carousel'

  export function Component() {
    const { carouselFragment } = useTransitionCarousel({
      items: mockedItems.map((i) => ({
        id: i.id,
        renderItem: (
          <CarouselItem color={i.color}>
            {i.title}
          </CarouselItem>
        ),
      })),
    });

    return (
      <div>
        {carouselFragment}
      </div>
    );
  }

As you may see, the animation result is slightly different, since the hook that powers this version of the carousel works slightly different. For more information about how it works, you can check here.

Note: Unlike what happen with useSpringCarousel, the useTransitionCarousel hook makes use of react state, aka useState, to trigger the carousel navigation.

nextLoop