| 1 | export interface UseAnimationFrameReturn {
|
| 2 | cancel(): void;
|
| 3 | /**
|
| 4 | * Request for the provided callback to be called on the next animation frame.
|
| 5 | * Previously registered callbacks will be cancelled
|
| 6 | */
|
| 7 | request(callback: FrameRequestCallback): void;
|
| 8 | /**
|
| 9 | * Request for the provided callback to be called on the next animation frame.
|
| 10 | * Previously registered callbacks can be cancelled by providing `cancelPrevious`
|
| 11 | */
|
| 12 | request(cancelPrevious: boolean, callback: FrameRequestCallback): void;
|
| 13 | }
|
| 14 | /**
|
| 15 | * Returns a controller object for requesting and cancelling an animation freame that is properly cleaned up
|
| 16 | * once the component unmounts. New requests cancel and replace existing ones.
|
| 17 | *
|
| 18 | * ```ts
|
| 19 | * const [style, setStyle] = useState({});
|
| 20 | * const animationFrame = useAnimationFrame();
|
| 21 | *
|
| 22 | * const handleMouseMove = (e) => {
|
| 23 | * animationFrame.request(() => {
|
| 24 | * setStyle({ top: e.clientY, left: e.clientY })
|
| 25 | * })
|
| 26 | * }
|
| 27 | *
|
| 28 | * const handleMouseUp = () => {
|
| 29 | * animationFrame.cancel()
|
| 30 | * }
|
| 31 | *
|
| 32 | * return (
|
| 33 | * <div onMouseUp={handleMouseUp} onMouseMove={handleMouseMove}>
|
| 34 | * <Ball style={style} />
|
| 35 | * </div>
|
| 36 | * )
|
| 37 | * ```
|
| 38 | */
|
| 39 | export default function useAnimationFrame(): UseAnimationFrameReturn;
|