useAutoPaging.ts

import { useEffect, useState } from "react";
import usePaging from "./usePaging";
import useHover from "./useHover";
import useInterval from "./useInterval";

export default function useAutoPaging(
  totalPages: number,
  delay = 5000,
  defaultPage = 1
) {
  let { currentPage, goForward, goBack, goTo } = usePaging(
    totalPages,
    defaultPage
  );
  let [pageDelay, setPageDelay] = useState(delay);
  let [hoverRef, isHovered] = useHover();

  // If the caller updates the delay prop, update state
  useEffect(
    () => {
      setPageDelay(delay);
    },
    [delay]
  );

  // Start by setting delay to the prop given by caller
  const start = () => setPageDelay(delay);
  // Stop by setting the delay to 0.
  const stop = () => setPageDelay(0);

  useEffect(
    () => {
      if (isHovered) stop();
      else start();
    },
    [isHovered]
  );

  // Call goForward (method from usePaging) every N milliseconds
  useInterval(goForward, pageDelay);

  // return the usePaging stuff, plus the ref that the caller can use to
  // decide which dom element should pause the paging on hover.
  return {
    currentPage,
    goForward,
    goBack,
    pauseRef: hoverRef as React.MutableRefObject<any>,
    goTo
  };
}