Skip to main content
Version: 5.0.3

useRaf

About#

A continuously running requestAnimationFrame hook for React

Image from Gyazo

Installation#

npm install --save rooks

Importing the hook#

import { useRaf } from 'rooks';

Usage#

let angle = 0;
function updateAngle() {
angle = (angle + 3) % 360;
return (angle * Math.PI) / 180;
}
function Demo() {
const { value: shouldRun, toggleValue: toggleShouldRun } = useToggle(true);
const myRef = useRef();
const canvasRef = useRef();
useRaf(() => {
if (canvasRef && canvasRef.current) {
const screenRatio = window.devicePixelRatio || 1;
let angle = updateAngle();
const canvas = canvasRef.current;
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
ctx.scale(screenRatio, screenRatio);
ctx.fillStyle = 'midnightblue';
ctx.globalAlpha = 1;
ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
ctx.fillStyle = 'yellow';
ctx.lineWidth = 2;
ctx.translate(50, 50);
ctx.rotate(angle);
ctx.fillRect(-20, -20, 40, 40);
ctx.restore();
}
}, shouldRun);
return (
<>
<h2>
Request animation frame is now {shouldRun ? '' : 'in'}active. Click to
toggle.
</h2>
<p>
<button onClick={toggleShouldRun}>Toggle Raf</button>{' '}
</p>
<canvas
ref={canvasRef}
style={{ height: `100px`, width: `100%`, background: 'grey' }}
/>
</>
);
}
render(<Demo />);

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5