react-simple-headless-carousel v0.0.19

React Simple Headless Carousel

Component features

• Extremely small package size (gzipped):
  • Javascript: 2.6kB
  • CSS: 1.5kB
• 0 external dependencies
• Full typescript support
• Built in with Tailwind, but you can always customize the styles
• Handling touch/mouse events
• Lazy image loading
• Responsive support

Documentation

Simple react carousel docs

How to use:

If you are using Tailwind:

tailwind.config.ts

export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-simple-headless-carousel/**/*.js",
  ],
} satisfies Config;

...other way?

import 'react-simple-headless-carousel/styles.min.css';

Components markup:

import {
  Carousel,
  CarouselProvider,
  Counter,
  DotsGroup,
  NextButton,
  PrevButton,
  Slide,
} from 'react-simple-headless-carousel';

<CarouselProvider total={2}>
  <Carousel>
    <Slide>
      <img src="..." />
    </Slide>
    <Slide>
      <img src="..." />
    </Slide>
  </Carousel>

  <DotsGroup />
  <NextButton>Next<NextButton />
  <PrevButton>Prev</PrevButton>
</CarouselProvider>

Props documentation:

<CarouselProvider />

Component is used to initialize the carousel context with configuration options and wrap the other components.

<Carousel />

A carousel that wraps the slides and provides the core functionality, such as scrolling to the next or previous slide.

<Slide />

A single slide in a carousel.

<Dot />

A single dot.

<DotsGroup />

A component that renders a group of dots, representing the slides in the carousel. It provides auto generated dots for the carousel.

<NextButton />

<PrevButton />

<Counter />

TODO:

• Add beta implementation
• Add stable version
• Setup CI
• DX improvments prettier/eslint
• Add docs
• Context initial props refactoring
• Add unit tests
• Add examples
• Publish on NPM
• Add counter element