React useCarousel hook 🎠

This npm package provides react components to display a carousel. The components can be loaded through a useCarousel hook. The carousel is quite simple but still supports a wide set of requirements and is easy to use.

Key features

• 🫱🏾‍🫲🏼 Load multiple carousels on one page without conflicts
• ⚡️ Easy to use Carousel, Slides, Control and Pagination components
• 📦 Lightweight and zero dependencies (besides react)
• 𝌕 Supports multiple slides per view without any custom configurations
• ⚛️ Realized with vanilla JavaScript and CSS Scroll Snap for React apps
• 🦮 Accessible and automatically applied aria attributes

Installation

npm install react-use-carousel-hook
# or
yarn add react-use-carousel-hook

Usage

With react-use-carousel-hook you can easily display a carousel by importing the hook and use the returned components. There are four available components.

• The first one is the Carousel component which is needed to support the aria attributes.
• The second one is the Slides component which is used to wrap your slides.
• The third one is the Control component which can be used to display previous / next slide buttons.
• The last one is the Pagination component which can be used to display a pagination representing the carousel slides.

import { useCarousel } from 'react-use-carousel-hook';
import "react-use-carousel-hook/dist/index.css";

const YourComponent = ({ items = [] }) => {
  const { Carousel, Slides, Control, Pagination } = useCarousel();

  return (
    <Carousel>
      <Slides>
        {items.map((item) => (
          <div key={item.id}>
            <h3>{item.title}</h3>
            <p>{item.content}</p>
          </div>
        ))}
      </Slides>

      <Control direction="prev" />

      <Pagination buttonClassName="bg-gray aria-selected:bg-black" />
      {/* OR */}
      <Pagination>
        {(index) => <button className="bg-gray aria-selected:bg-black">Slide number {index}</button>}
      </Pagination>

      <Control direction="next" />
    </Carousel>
  );
};

See the docs for API reference, examples and more.

Should I use a carousel?

Short answer, no. See shouldiuseacarousel.com for more information on this topic. If you want or have to use a carousel anyway you're more than welcome to use this one. :-)

Contributors

Big thanks to all our contributors who helped with this project.