react-pre-hooksuseAnimationFrame
Handle the requestAnimationFrame method of the window object.
Parameters
- a frame request callback function.
- and some options:
| Name | Type | Description |
|---|---|---|
| startOnMount | Boolean | start automatically when the component is mounted (default is false). |
Return Values
| Name | Type | Description |
|---|---|---|
| isStarted | Boolean | indicates whether the animation frame request is starting or not. |
| start | Function | start requesting. |
| cancel | Function | cancel requesting. |
| toggle | Function | toggle between start and cancel, and it takes a boolean to force it. |
Example Usage
tsx
import { useAnimationFrame } from 'react-pre-hooks';
export default function Example() {
const frame = useAnimationFrame(() => {
document.body.appendChild(document.createElement('span'));
});
return (
<main>
<button onClick={() => frame.toggle()}>
{frame.isStarted ? 'cancel' : 'start'}
</button>
</main>
);
}import { useAnimationFrame } from 'react-pre-hooks';
export default function Example() {
const frame = useAnimationFrame(() => {
document.body.appendChild(document.createElement('span'));
});
return (
<main>
<button onClick={() => frame.toggle()}>
{frame.isStarted ? 'cancel' : 'start'}
</button>
</main>
);
}