Snap Carousel React

Installation

- Via npm npm install @snap-carousel/react --save

- Via Yarn yarn add @snap-carousel/react

Usage

Component

import {
  SnapCarousel
} from '@snap-carousel/react';
import '@snap-carousel/react/dist/styles.css';

const Component = () => {
  let slides = [...];

  return (
    <SnapCarousel>
      {slides.map((slide) => (
        <div className="slide" key={slide}>
          {slide}
        </div>
      ))}
    </SnapCarousel>
  );
};

Hooks

import {
  useDragToScroll,
  useScroll,
  useActiveSnap,
} from '@snap-carousel/react';
import '@snap-carousel/core/dist/styles.css';

const Component = () => {
  const ref = React.useRef();

  useDragToScroll({ ref });

  let slides = [...];

  return (
    <div ref={ref}>
      {slides.map((slide) => (
        <div key={slide}>
          {slide}
        </div>
      ))}
    </div>
  );
};

For more advanced usage see the Storybook stories.

Don't forget to import both css and js in your project!