use-carousel

1import * as React from "react";
2import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
3 
4type CarouselApi = UseEmblaCarouselType[1];
5type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
6type CarouselOptions = UseCarouselParameters[0];
7type CarouselPlugin = UseCarouselParameters[1];
8 
9interface UseCarouselProps {
10  count: number;
11  initialIndex?: number;
12  orientation?: "horizontal" | "vertical";
13  opts?: CarouselOptions;
14  plugins?: CarouselPlugin;
15  setApi?: (api: CarouselApi) => void;
16}
17 
18export function useCarousel({
19  count,
20  initialIndex = 0,
21  orientation = "horizontal",
22  opts,
23  plugins,
24  setApi,
25}: UseCarouselProps) {
26  const [carouselRef, api] = useEmblaCarousel(
27    {
28      inViewThreshold: 1,
29      ...opts,
30      startIndex: initialIndex,
31      axis: orientation === "horizontal" ? "x" : "y",
32    },
33    plugins
34  );
35 
36  const [activeIndex, setActiveIndex] = React.useState(initialIndex);
37  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
38  const [canScrollNext, setCanScrollNext] = React.useState(count > 1);
39 
40  const onSelect = React.useCallback((emblaApi: CarouselApi) => {
41    if (!emblaApi) return;
42    setActiveIndex(emblaApi.selectedScrollSnap());
43    setCanScrollPrev(emblaApi.canScrollPrev());
44    setCanScrollNext(emblaApi.canScrollNext());
45  }, []);
46 
47  React.useEffect(() => {
48    if (!api) return;
49    onSelect(api);
50    api.on("select", onSelect);
51    api.on("reInit", onSelect);
52    return () => {
53      api.off("select", onSelect);
54      api.off("reInit", onSelect);
55    };
56  }, [api, onSelect]);
57 
58  React.useEffect(() => {
59    if (!api || !setApi) return;
60    setApi(api);
61  }, [api, setApi]);
62 
63  const scrollPrev = React.useCallback(() => {
64    api?.scrollPrev();
65  }, [api]);
66 
67  const scrollNext = React.useCallback(() => {
68    api?.scrollNext();
69  }, [api]);
70 
71  const scrollTo = React.useCallback(
72    (index: number) => {
73      if (!api) return;
74      const clamped = Math.max(0, Math.min(index, count - 1));
75      api.scrollTo(clamped);
76    },
77    [api, count]
78  );
79 
80  const handleKeyDown = React.useCallback(
81    (event: React.KeyboardEvent<HTMLDivElement>) => {
82      if (event.key === "ArrowLeft") {
83        event.preventDefault();
84        scrollPrev();
85      } else if (event.key === "ArrowRight") {
86        event.preventDefault();
87        scrollNext();
88      }
89    },
90    [scrollPrev, scrollNext]
91  );
92 
93  return {
94    carouselRef,
95    api,
96    opts,
97// … truncated