How to use the @rooks/use-raf function in @rooks/use-raf

To help you get started, we’ve selected a few @rooks/use-raf examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github imbhargav5 / rooks / packages / storybook / src / raf.js View on Github external
function UseRafDemo() {
  const [shouldRun, 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);

@rooks/use-raf

A continuously running requestAnimationFrame hook for React

MIT
Latest version published 4 years ago

Package Health Score

56 / 100
Full package analysis

Popular @rooks/use-raf functions