31 lines
912 B
TypeScript
31 lines
912 B
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { EmblaCarouselType } from "embla-carousel";
|
|
|
|
export const useScrollProgress = (emblaApi: EmblaCarouselType | undefined) => {
|
|
const [scrollProgress, setScrollProgress] = useState(0);
|
|
|
|
const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
|
|
const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()));
|
|
setScrollProgress(progress * 100);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!emblaApi) return;
|
|
|
|
onScroll(emblaApi);
|
|
emblaApi
|
|
.on("reInit", onScroll)
|
|
.on("scroll", onScroll)
|
|
.on("slideFocus", onScroll);
|
|
|
|
return () => {
|
|
emblaApi
|
|
.off("reInit", onScroll)
|
|
.off("scroll", onScroll)
|
|
.off("slideFocus", onScroll);
|
|
};
|
|
}, [emblaApi, onScroll]);
|
|
|
|
return scrollProgress;
|
|
};
|