RSCJS - React Spring Carousel JS

Events

Sometimes it can happend that we'll want to perform some actions when a user interact with the carousel (for example, maybe you'll want to do something every time a slide changes). Normally you'll use callbacks to perform actions but this pattern wasn't enough from our perspective.

The first reason was because we wanted to avoid, as much as possible, to leverage on the state update (AKA React rerender) to perform animations, so that wasn't an option. The second point was that if we wanted to use callbacks it would require us to pass them down from the highest level (you would need to pass them directly into the main hook), and this solution didn't give us the flexibility we wanted. For this reason it was decided to implement our custom events, so that you'll be able to listen pretty much from everywhere and respond accordingly in a simple and effective way.

Available events

How to use them

Every carousel instance will expose a useListenToCustomEvent hook that you need to destructure in order to start listening for events. The hook accept a callback function that receive an object containing the type of event and, eventually, useful props related to that event and every time the carousel dispatch an event, the callback will be triggered.

Note: To know which props you'll get from every event, you need to narrow the type of the object by checking the eventName property.

1import {
2  useSpringCarousel,
3} from "react-spring-carousel-js";
4
5const Component = () => {
6  const { carouselFragment, useListenToCustomEvent } = useSpringCarousel({
7    items: []
8  })
9
10  useListenToCustomEvent((data) => {
11    if (data.eventName === "onSlideChange") {
12      // Once we've narrowed the type of event
13      // you can safetely access to the props
14      // related to the current event.
15      console.log(data.currentItem)
16    }
17  });
18
19  return (
20    <div>
21      {carouselFragment}
22    </div>
23  )
24}
25

Keep in mind that the events will unsubscribe automatically. 🤓

onSlideStartChange

Name: onSlideStartChange
Type: onSlideStartChange
Description: This event will be emitted every time a slide is about to slide.

onSlideChange

Name: onSlideChange
Type: onSlideChange
Description: This event will be emitted every time a slide has completely slided.

onFullscreenChange

Name: onFullscreenChange
Type: onFullscreenChange
Description: This event will be emitted every time you enter / exit from fullscreen mode.

onDrag

Name: onDrag
Type: onDrag
Description: This event will be emitted when a user start to drag. This event is only emitted if you use the useSpringCarousel.

onLeftSwipe

Name: onLeftSwipe
Type: onLeftSwipe
Description: This event will be emitted when a user swipe to the left. The event is only available when using theuseTransitionCarousel.

onRightSwipe

Name: onRightSwipe
Type: onRightSwipe
Description: This event will be emitted when a user swipe to the right. The event is only available when using theuseTransitionCarousel.