46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import type { EmblaCarouselType } from "embla-carousel";
|
|
|
|
export const useCarouselControls = (emblaApi: EmblaCarouselType | undefined) => {
|
|
const [prevDisabled, setPrevDisabled] = useState(true);
|
|
const [nextDisabled, setNextDisabled] = useState(true);
|
|
const [scrollProgress, setScrollProgress] = useState(0);
|
|
|
|
const scrollPrev = useCallback(() => {
|
|
if (!emblaApi) return;
|
|
emblaApi.scrollPrev();
|
|
}, [emblaApi]);
|
|
|
|
const scrollNext = useCallback(() => {
|
|
if (!emblaApi) return;
|
|
emblaApi.scrollNext();
|
|
}, [emblaApi]);
|
|
|
|
const onSelect = useCallback((api: EmblaCarouselType) => {
|
|
setPrevDisabled(!api.canScrollPrev());
|
|
setNextDisabled(!api.canScrollNext());
|
|
}, []);
|
|
|
|
const onScroll = useCallback((api: EmblaCarouselType) => {
|
|
const progress = Math.max(0, Math.min(1, api.scrollProgress()));
|
|
setScrollProgress(progress * 100);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!emblaApi) return;
|
|
|
|
onSelect(emblaApi);
|
|
onScroll(emblaApi);
|
|
|
|
emblaApi.on("reInit", onSelect).on("select", onSelect);
|
|
emblaApi.on("reInit", onScroll).on("scroll", onScroll);
|
|
|
|
return () => {
|
|
emblaApi.off("reInit", onSelect).off("select", onSelect);
|
|
emblaApi.off("reInit", onScroll).off("scroll", onScroll);
|
|
};
|
|
}, [emblaApi, onSelect, onScroll]);
|
|
|
|
return { prevDisabled, nextDisabled, scrollPrev, scrollNext, scrollProgress };
|
|
};
|