GoScrobble/web/node_modules/@restart/hooks/esm/useAnimationFrame.d.ts

40 lines
1.2 KiB
TypeScript
Raw Normal View History

2022-04-25 02:47:15 +00:00
export interface UseAnimationFrameReturn {
cancel(): void;
/**
* Request for the provided callback to be called on the next animation frame.
* Previously registered callbacks will be cancelled
*/
request(callback: FrameRequestCallback): void;
/**
* Request for the provided callback to be called on the next animation frame.
* Previously registered callbacks can be cancelled by providing `cancelPrevious`
*/
request(cancelPrevious: boolean, callback: FrameRequestCallback): void;
}
/**
* Returns a controller object for requesting and cancelling an animation freame that is properly cleaned up
* once the component unmounts. New requests cancel and replace existing ones.
*
* ```ts
* const [style, setStyle] = useState({});
* const animationFrame = useAnimationFrame();
*
* const handleMouseMove = (e) => {
* animationFrame.request(() => {
* setStyle({ top: e.clientY, left: e.clientY })
* })
* }
*
* const handleMouseUp = () => {
* animationFrame.cancel()
* }
*
* return (
* <div onMouseUp={handleMouseUp} onMouseMove={handleMouseMove}>
* <Ball style={style} />
* </div>
* )
* ```
*/
export default function useAnimationFrame(): UseAnimationFrameReturn;