@faceless-ui/slider/dist/SliderProvider/useAutoplay.js

A React library for building every kind of slider

import { useCallback, useEffect, useRef } from "react";
export const useAutoplay = (args) => {
    const { isPaused, enable, isFullyScrolled, autoplaySpeed, dispatchSliderState } = args;
    const animationRef = useRef(null);
    const autoplayTimer = useRef(undefined);
    const startAutoplay = useCallback(() => {
        autoplayTimer.current = setInterval(() => {
            if (animationRef.current)
                cancelAnimationFrame(animationRef.current);
            animationRef.current = requestAnimationFrame(() => {
                dispatchSliderState({
                    type: 'GO_TO_NEXT_SLIDE',
                    payload: {
                        loop: true,
                        isFullyScrolled,
                    },
                });
            });
        }, autoplaySpeed);
    }, [
        isFullyScrolled,
        autoplaySpeed,
        dispatchSliderState
    ]);
    const stopAutoplay = useCallback(() => {
        const { current: autoPlayTimerID } = autoplayTimer;
        if (autoPlayTimerID)
            clearInterval(autoPlayTimerID);
    }, []);
    useEffect(() => {
        if (!isPaused && enable)
            startAutoplay();
        if (isPaused || !enable)
            stopAutoplay();
        return () => stopAutoplay();
    }, [
        isPaused,
        enable,
        startAutoplay,
        stopAutoplay,
    ]);
    useEffect(() => {
        () => {
            if (animationRef.current) {
                cancelAnimationFrame(animationRef.current);
            }
            if (autoplayTimer.current) {
                clearTimeout(autoplayTimer.current);
            }
        };
    }, []);
    return null;
};
//# sourceMappingURL=useAutoplay.js.map