41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { EmblaCarouselType } from "embla-carousel";
|
|
|
|
export const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
|
|
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
|
|
const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
|
|
|
|
const onPrevButtonClick = useCallback(() => {
|
|
if (!emblaApi) return;
|
|
emblaApi.scrollPrev();
|
|
}, [emblaApi]);
|
|
|
|
const onNextButtonClick = useCallback(() => {
|
|
if (!emblaApi) return;
|
|
emblaApi.scrollNext();
|
|
}, [emblaApi]);
|
|
|
|
const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
|
|
setPrevBtnDisabled(!emblaApi.canScrollPrev());
|
|
setNextBtnDisabled(!emblaApi.canScrollNext());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!emblaApi) return;
|
|
|
|
onSelect(emblaApi);
|
|
emblaApi.on("reInit", onSelect).on("select", onSelect);
|
|
|
|
return () => {
|
|
emblaApi.off("reInit", onSelect).off("select", onSelect);
|
|
};
|
|
}, [emblaApi, onSelect]);
|
|
|
|
return {
|
|
prevBtnDisabled,
|
|
nextBtnDisabled,
|
|
onPrevButtonClick,
|
|
onNextButtonClick,
|
|
};
|
|
};
|