Use Animated Canvas

A React hook to create a canvas element with a built-in render loop. Useful for creating animations, games, and other interactive graphics.

Installation

npm install @ihtnc/use-animated-canvas

Usage

import { use2dAnimatedCanvas } from '@ihtnc/use-animated-canvas'

const App = () => {
  const { Canvas } = use2dAnimatedCanvas({
    render: (context, data) => {
      // this function gets called every frame
      // use context to draw on the canvas
      // use data to access details like frame count, fps, etc
      // data can also include a user-defined value if supplied
    }
  })

  return <Canvas />
};

More usage examples are available here.