Tempus/react

React bindings for tempus.

Basic Usage

useTempus adds a callback to the loop for the lifetime of the component and removes it on unmount. The callback receives the same single state object as the core API: { time, deltaTime, frame, budget }.

import { useTempus } from 'tempus/react'

function App() {
  useTempus(({ time, deltaTime, frame, budget }) => {
    console.log('frame', time, deltaTime, frame)
  })
}

The latest callback is always used without re-subscribing, so it can safely close over component state without being wrapped in useCallback.

Options

useTempus forwards the same options as Tempus.add:

useTempus(() => {}, {
  fps: 30,            // Will run at 30 FPS (or a relative rate like '50%')
  order: -1,          // Will run before other animations (lower runs first)
  label: 'my-effect', // Shown in tempus/profiler and Tempus.inspect()
})

Patching requestAnimationFrame

ReactTempus calls Tempus.patch() on mount and Tempus.unpatch() on unmount, routing every native requestAnimationFrame through Tempus while it's mounted. Render it once near the root of your app.

import { ReactTempus } from 'tempus/react'

// patch defaults to true; pass patch={false} to disable
<ReactTempus patch />