40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
export default function useRafLoop(callback) {
|
|
var initiallyActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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;
|
|
// @ts-ignore
|
|
raf.current && cancelAnimationFrame(raf.current);
|
|
}
|
|
}, function () {
|
|
// start
|
|
if (!rafActivity.current) {
|
|
rafActivity.current = true;
|
|
raf.current = requestAnimationFrame(step);
|
|
}
|
|
}, function () {
|
|
return rafActivity.current;
|
|
} // isActive
|
|
];
|
|
}, []);
|
|
useEffect(function () {
|
|
if (initiallyActive) {
|
|
result[1]();
|
|
}
|
|
return result[0];
|
|
}, []);
|
|
return result;
|
|
} |