@contentco/react-scroll-snap-slider

react-scroll-snap-slider

A React Slider / Carousel Component with Scroll Snapping and Intersection Observer. Demo

Installation

yarn add @lifarl/react-scroll-snap-slider

Note: This is a react component which uses styled components as peer dependency. yarn add styled-components if you don't have it.

Usage

import { Slider } from '@lifarl/react-scroll-snap-slider'
;<Slider>
  <div>Foo</div>
  <div>Bar</div>
  <div>Baz</div>
</Slider>

See also examples in App.tsx

Intersection Observer

Firing tracking events on css based sliders can be done with the intersection observer. Pass onSlideVisible to the Carousel and it will fire when a slide enters the viewport without triggering a rerender.

Props

onSlideVisible?: (index: number) => void // Callback that is triggered when a slide gets visible by a threshold of 0.5
renderCustomArrow?: ({
  direction,
  ref,
  onClick,
}: CustomArrowProps) => JSX.Element // In case you want to use your own arrow design and logic
slidesPerPageSettings?: SlidesPerPageSettings // optionally for setting fixed amounts of slides for different viewports (min-width: 512px / 753px / 1232px)
slideWidth?: number // optionally for setting a fixed slide width
onScrollStart?: () => void // callback that triggers at the beginning of the scroll event
onScrollEnd?: (index: number) => void // callback that triggers at the end of the scroll event
children: React.ReactNode // put your slides here :)
onSlidesVisibilityChange: (index: number) => void // callback when a slides visibility changes
ref: React.Ref // exposes three imperative handles: scrollToSlide, sliderRef, manualScroll
disableArrow: boolean // Disable arrows entirely

Browser Support

This lib does not include scroll snap polyfills to support older browsers like ie11. You would need to add them yourself. For more information see here.