@orca-fe/hooks/es/useAnimationFrame.js

React Hooks Collections

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEffect, useMemo, useState } from 'react';
import useMemoizedFn from "./useMemorizedFn";
var useAnimationFrame = (callback = (ms, stepMs) => {}, options = {}) => {
  var manual = options.manual;
  var callbackMemorizedFn = useMemoizedFn(callback);
  var _useState = useState({
      timer: 0,
      running: false
    }),
    _useState2 = _slicedToArray(_useState, 1),
    _this = _useState2[0];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    running = _useState4[0],
    setRunning = _useState4[1];
  var stop = () => {
    window.cancelAnimationFrame(_this.timer);
    _this.running = false;
    setRunning(false);
  };
  var start = () => {
    stop();
    var lastTime = 0;
    _this.running = true;
    setRunning(true);
    var runTimer = () => {
      _this.timer = window.requestAnimationFrame(ms => {
        callbackMemorizedFn(ms, ms - lastTime);
        lastTime = ms;
        runTimer();
      });
    };
    runTimer();
  };
  var toggle = useMemoizedFn(() => {
    if (_this.running) {
      stop();
    } else {
      start();
    }
  });
  useEffect(() => {
    if (!manual) {
      start();
    }
    return stop;
  }, []);
  return useMemo(() => ({
    start,
    stop,
    toggle,
    running
  }), [running]);
};
export default useAnimationFrame;