raf-handler

Simple small script to centralize request animation frame.

raf-handler

Install

npm i raf-handler

Usage - Example

import rAF, { subscribeUpdate, unsubscribeUpdate } from "raf-handler";

rAF({ fps: 60 } /* default and optional */); // start animationFrameRequest

export default () => {
  const update = (timestamp) => console.log(timestamp);

  subscribeUpdate(update); // to add your function in a rAF array

  unsubscribeUpdate(update); // to remove your function from a rAF array
};

From main function (v0.1.3) - Example

import rAF from "raf-handler";

export default () => {
  const update = (timestamp) => console.log(timestamp);

  const ticker = rAF();

  ticker.add(update); // to add your function in a rAF array

  ticker.remove(update); // to remove your function from a rAF array
};

With react and hooks - Example

import { useMemo, useCallback, useEffect } from "react";
import rAF, { subscribeUpdate, unsubscribeUpdate } from "raf-handler";

export default () => {
  useMemo(rAF, []); // autoinit only one time

  const update = useCallback((timestamp) => {
    console.log(timestamp);
  }, []);

  useEffect(() => {
    subscribeUpdate(update); // add your function
    return () => {
      unsubscribeUpdate(update); // remove when unmount
    };
  }, []);
};

Other function - Example

Use with an external rAF

import { subscribeUpdate, update as updateRAF } from "raf-handler";

export default () => {
  const update = (timestamp) => console.log(timestamp);

  const initUpdate = (timestamp) => {
    updateRAF(timestamp);
    id.current = window.requestAnimationFrame(initUpdate);
  };

  subscribeUpdate(update);

  initUpdate();
};

Reset all rAF function

import { resetUpdate } from "raf-handler";

resetUpdate();

Build

npm run build

License

MIT © William Manco