@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
32 lines • 1.08 kB
JavaScript
import { useCallback, useEffect, useRef } from 'react';
import { getHookDeps } from './get-hook-deps';
/**
* Will return request animation frame as a function which will clean itself up.
*/
export var useRequestAnimationFrame = function useRequestAnimationFrame() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
cleanup: 'unmount'
};
var frames = useRef([]);
useEffect(function () {
return function () {
if (frames.current.length) {
frames.current.forEach(function (id) {
return cancelAnimationFrame(id);
});
frames.current = [];
}
};
// We dynamically set this so we either clean up on the next effect - or on unmount.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, getHookDeps(opts));
return useCallback(function (handler) {
var id = requestAnimationFrame(function (time) {
frames.current = frames.current.filter(function (frameId) {
return frameId !== id;
});
handler(time);
});
frames.current.push(id);
}, []);
};