useCountdown timer hook

[vincerubinetti]

Not the same as the already built-in useCountDown hook. This is more like a useTimer hook. Might be useful to someone, or maybe the maintainers want to include it in the library.

Related: #128

import { useCallback, useEffect, useRef, useState } from "react";
import { now } from "lodash";
import { useEventListener, useInterval } from "@reactuses/core";

/** countdown hook */
export const useCountdown = (seconds: number, poll = 50) => {
  /** current time remaining, in seconds. 0 if stopped. */
  const [countdown, setCountdown] = useState(0);
  /** timestamp mark */
  const timestamp = useRef(now());
  /** func to call when time runs out */
  const doneFunc = useRef<() => void>(undefined);

  /** start countdown */
  const start = useCallback(
    (onDone?: () => void) => {
      timestamp.current = now();
      setCountdown(seconds);
      doneFunc.current = onDone;
    },
    [seconds],
  );

  /** stop countdown */
  const stop = useCallback(() => {
    setCountdown(0);
    doneFunc.current = undefined;
  }, []);

  /** poll periodically to get updated time */
  useInterval(
    () => {
      /** https://github.com/childrentime/reactuse/issues/128 */
      if (!countdown) return;
      /** exact time elapsed since countdown started */
      const value = seconds - (now() - timestamp.current) / 1000;

      /** if still time left, update time */
      if (value > 0) setCountdown(value);
      else {
        /** otherwise, stop */
        setCountdown(0);
        doneFunc.current?.();
        doneFunc.current = undefined;
      }
    },
    countdown ? poll : null,
    /** so we don't get brief flash of countdown exactly === seconds */
    { immediate: true },
  );

  return [countdown, start, stop] as const;
};

[vincerubinetti]

Example usage, and my personal use case why I found it useful:

const Component = () => {
  const [playing, setPlaying] = useState(false);
  const [recording, setRecording] = useState(false);
  const [countdown, startCountdown, stopCountdown] = useCountdown(3);

  return (
    <>
      <CheckButton
        tooltip={recording ? "Disarm recording" : "Arm recording"}
        checked={recording}
        onChange={(value) => {
          if (countdown) stopCountdown();
          setRecording(value);
        }}
      >
        {countdown ? Math.floor(countdown + 1).toFixed(0) : "🔴"}
      </CheckButton>

      <CheckButton
        tooltip={playing ? "Pause" : "Play"}
        checked={playing}
        onChange={(value) => {
          if (countdown) stopCountdown();
          else if (value) {
            if (recording) startCountdown(() => setPlaying(true));
            else setPlaying(true);
          } else setPlaying(false);
        }}
      >
        {playing ? "⏸️" : "▶️"}
      </CheckButton>
    </>
  );
};

[childrentime]

Very Good. Notwithstanding, I consider we can enhance the original useCountdown hook, add optional start and stop feature.

[childrentime]

const useCountDown = (
  time,
  format = getHMSTime,
  callback,
  options = { autoStart: true }
) => {
  const { autoStart = true } = options;
  const [remainTime, setRemainTime] = useState(time);
  const [delay, setDelay] = useState(autoStart ? 1000 : null);
  const [isActive, setIsActive] = useState(autoStart);

  // 开始倒计时
  const start = useCallback((onComplete) => {
    setIsActive(true);
    setRemainTime(time);
    setDelay(1000);
    if (onComplete) {
      callback = onComplete;
    }
  }, [time]);

  // 停止倒计时
  const stop = useCallback(() => {
    setIsActive(false);
    setDelay(null);
  }, []);

  useInterval(() => {
    if (remainTime <= 0) {
      setDelay(null);
      setIsActive(false);
      return;
    }
    setRemainTime(remainTime - 1);
  }, delay);

  useEffect(() => {
    if (remainTime <= 0 && isActive && callback) {
      callback();
    }
  }, [remainTime, isActive, callback]);

  const [hour, minute, second] = format(remainTime);

  // 返回增强的结果 - 时分秒加上 start, stop 方法
  return [hour, minute, second, start, stop, isActive];
};

Maybe something like this. Would you like to put forward a pull request to include it to the lib?

[vincerubinetti]

Feel free to use any of my code in the library, no credit needed. I probably won't contribute a PR because I don't know exactly how you want the functionality to work, and I don't want to mess up the existing useCountDown. Also I can't write/speak Mandarin so I can't comment the code consistently with your other code.