embla

npm install @thyeone/embla

Usage

import { EmblaCarousel } from '@thyeone/embla';

const LIST_LENGTH = 10;

export default function App() {
  return (
    <EmblaCarousel.Root>
      <EmblaCarousel.Content>
        {Array.from({ length: LIST_LENGTH }).map((_, index) => (
          <Carousel key={index} />
        ))}
      </EmblaCarousel.Content>
    </EmblaCarousel.Root>
  );
}

function Carousel() {
  const { currentIndex } = useEmbla();

  return <EmblaCarousel.Item>{currentIndex}</EmblaCarousel.Item>;
}

Interface

export declare const EmblaCarousel: {
    Root: ({ options: injectedOptions, scrollOptions, autoplayOptions, direction, isAutoScroll, isAutoPlay, isAutoHeight, enableScrollIndexTracking, enableKeyboardEvent, className, ...rest }: CarouselProps) => JSX.Element;
    Content: ({ className, cursorGrab, wrapperClassName, ...rest }: React.ComponentProps<"div"> & ContentProps) => JSX.Element;
    Item: ({ className, ...rest }: React.ComponentProps<"div">) => JSX.Element;
};

Nested Carousel (prevent propagation)

export default function Index() {
  return (
     <EmblaCarousel.Root
      options={{
        stopPropagation: true,
      }}
    >
      <EmblaCarousel.Content>
        <EmblaCarousel.Item>
          <EmblaCarousel.Root
            options={{
              stopPropagation: true,
            }}
          >
            <EmblaCarousel.Content>
              <EmblaCarousel.Item />
            </EmblaCarousel.Content>
          </EmblaCarousel.Root>
        </EmblaCarousel.Item>
      </EmblaCarousel.Content>
    </EmblaCarousel.Root>
  );
}