Wondering what’s next for npm?Check out our public roadmap! »

    @lifarl/react-scroll-snap-slider
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    react-scroll-snap-slider

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

    npm bundle size npm version NPM

    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 :)

    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.

    Install

    npm i @lifarl/react-scroll-snap-slider

    DownloadsWeekly Downloads

    847

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    105 kB

    Total Files

    42

    Last publish

    Collaborators

    • avatar