42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
export default function useRafLoop(callback, initiallyActive) {
|
|
if (initiallyActive === void 0) { initiallyActive = true; }
|
|
var raf = useRef(null);
|
|
var rafActivity = useRef(false);
|
|
var rafCallback = useRef(callback);
|
|
rafCallback.current = callback;
|
|
var step = useCallback(function (time) {
|
|
if (rafActivity.current) {
|
|
rafCallback.current(time);
|
|
raf.current = requestAnimationFrame(step);
|
|
}
|
|
}, []);
|
|
var result = useMemo(function () {
|
|
return [
|
|
function () {
|
|
// stop
|
|
if (rafActivity.current) {
|
|
rafActivity.current = false;
|
|
raf.current && cancelAnimationFrame(raf.current);
|
|
}
|
|
},
|
|
function () {
|
|
// start
|
|
if (!rafActivity.current) {
|
|
rafActivity.current = true;
|
|
raf.current = requestAnimationFrame(step);
|
|
}
|
|
},
|
|
function () { return rafActivity.current; },
|
|
];
|
|
}, []);
|
|
useEffect(function () {
|
|
if (initiallyActive) {
|
|
result[1]();
|
|
}
|
|
return result[0];
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
return result;
|
|
}
|