Wondering what’s next for npm?Check out our public roadmap! »

    @rooks/use-raf
    TypeScript icon, indicating that this package has built-in type declarations

    4.11.2 • Public • Published

    @rooks/use-raf

    Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

    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!

    TitleCard

    Build Status

    About

    A continuously running requestAnimationFrame hook for React

    Image from Gyazo

    Installation

    npm install --save @rooks/use-raf
    

    Importing the hook

    import useRaf from "@rooks/use-raf";

    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 />);

    Install

    npm i @rooks/use-raf

    DownloadsWeekly Downloads

    693

    Version

    4.11.2

    License

    MIT

    Unpacked Size

    9.34 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar