React Spring Carousel

React Spring Carousel

Events

If you're wondering how to react to the carousel actions, you're in the right section 🥳


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

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

    useListenToCustomEvent((event) => {
      // Triggered during drag gestures
      if (event.eventName === "onDrag") {
        // Do something...
      } 
      // Triggered when the slide is about to slide
      else if (event.eventName === "onSlideStartChange") {
        // Do something...
      } 
      // Triggered when the slide animation is completed
      else if (event.eventName === "onSlideChange") {
        // Do something...
      } 
      // Triggered on fullscreen change
      else if (event.eventName === "onFullscreenChange") {
      }
    });

    return (
      <div>
        {carouselFragment}
      </div>
    );
  }
Keep in mind that the events will unsubscribe automatically 🤓

Every event will also came with some extra/useful data that you can eventually use; remember also that depending on the hook you're using, the events will slightly vary:

useSpringCarousel events

onSlideStartChange
Description: Event emitted every time an item is about to slide.
Extra event props:
{
  // Indicates where you're sliding to
  slideActionType: 'prev' | 'next', 
  // Props of the next active item
  nextItem: { 
    id: string
    index: number
  }
}
onSlideChange
Description: Event emitted when a slide animation is completed (when react spring calls the onRest() callback).
Extra event props:
{
  // Indicates where the slide came from
  slideActionType: 'prev' | 'next', 
  // Props of the current active item
  currentItem: { 
    id: string
    index: number
  }
}
onFullscreenChange
Description: Event emitted when you enter/exit from fullscreen mode.
Extra event props:
{
  isFullscreen: boolean
}
onDrag
Description: Event emitted when you start to drag.
Extra event props:
{
  // Indicates the direction of the drag action
  slideActionType: 'prev' | 'next', 
  /* 
  * For all other props you'll get, 
  * please refer to https://use-gesture.netlify.app/docs/state/
  **/
  ...useGestureProps
}

useTransitionCarousel events

onSlideStartChange
Description: Event emitted every time an item is about to slide.
Extra event props:
{
  // Indicates where you're sliding to
  slideActionType: 'prev' | 'next', 
  // Props of the next active item
  nextItem: { 
    id: string
    index: number
  }
}
onSlideChange
Description: Event emitted when a slide animation is completed (when react spring calls the onRest() callback).
Extra event props:
{
  // Indicates where the slide came from
  slideActionType: 'prev' | 'next', 
  // Props of the current active item
  currentItem: { 
    id: string
    index: number
  }
}
onFullscreenChange
Description: Event emitted when you enter/exit from fullscreen mode.
Extra event props:
{
  isFullscreen: boolean
}
onLeftSwipe
Description: Event emitted when you swipe to the left.
onRightSwipe
Description: Event emitted when you swipe to the left.