useAnimationFrame.d.ts 1.22 KB
Newer Older
Sangjune Bae's avatar
Sangjune Bae committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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;