A continuously running requestAnimationFrame hook for React
npm install @rooks/use-raf``
npm install rooks
or
`
yarn add rooks
Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!
!Build Status   
`
npm install --save @rooks/use-raf
`javascript`
import useRaf from "@rooks/use-raf";
`jsx
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 (
<>
{" "}
, width: 100%, background: "grey" }}
/>
);
}render(
``