useDotButton.tsx raw

   1  "use client";
   2  import type { EmblaCarouselType } from "node_modules/embla-carousel/esm/components/EmblaCarousel";
   3  import * as React from "react";
   4  import { UseDotButtonType } from "src/components/ui/custom/carousel-dots";
   5  
   6  export const useDotButton = (
   7    emblaApi: EmblaCarouselType | undefined
   8  ): UseDotButtonType => {
   9    const [selectedIndex, setSelectedIndex] = React.useState(0);
  10    const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([]);
  11  
  12    const onDotButtonClick = React.useCallback(
  13      (index: number) => {
  14        if (!emblaApi) {
  15          return;
  16        }
  17        emblaApi.scrollTo(index);
  18      },
  19      [emblaApi]
  20    );
  21  
  22    const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {
  23      setScrollSnaps(emblaApi.scrollSnapList());
  24    }, []);
  25  
  26    const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {
  27      setSelectedIndex(emblaApi.selectedScrollSnap());
  28    }, []);
  29  
  30    React.useEffect(() => {
  31      if (!emblaApi) {
  32        return;
  33      }
  34  
  35      onInit(emblaApi);
  36      onSelect(emblaApi);
  37      emblaApi.on("reInit", onInit).on("reInit", onSelect).on("select", onSelect);
  38    }, [emblaApi, onInit, onSelect]);
  39  
  40    return {
  41      selectedIndex,
  42      scrollSnaps,
  43      onDotButtonClick,
  44    };
  45  };
  46