Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

use-animation-frame

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

use-animation-frame

A React hook to run requestAnimationFrame seamlessly

    0.1.4latest

Version published
Maintainers
1
Yearly downloads
23,019
increased by102.63%

Weekly downloads

Readme

Source

use-animation-frame

A hook to effortlessly run requestAnimationFrame() in React (demo):

import useAnimationFrame from 'use-animation-frame'; const Counter = () => { const [time, setTime] = useState(0); useAnimationFrame(e => setTime(e.time)); return <div>Running for:<br/>{time.toFixed(1)}s</div>; };

Inspired by CSS-Tricks' Using requestAnimationFrame with React Hooks and my twitter reply.

API

Accepts a function that will be called on each requestAnimationFrame step. If there's a re-render and a new function is created, it'll use that instead of the previous one:

useAnimationFrame(callback);

The callback receives a single parameter, which is an object with two properties (based on the performance.now() API):

  • time: the absolute time since the hook was first mounted. This is useful for wall clock, general time, etc.
  • delta: the time since the hook was run last. This is useful to measure e.g. FPS.

All times are in the International System of Units seconds, including decimals.

Example: FPS counter

With my other library use-interpolation it's easy to calculate the FPS (see in CodeSandbox):

import React, { useState } from "react"; import useInterpolation from 'use-interpolation'; import useAnimationFrame from 'use-animation-frame'; const Counter = () => { const [time, setTime] = useState(0); // 1s of interpolation time const [fps, setFps] = useInterpolation(1000); useAnimationFrame(e => { setFps(1 / e.delta); setTime(e.time); }); return ( <div> {time.toFixed(1)}s <br /> {fps && Math.floor(fps.value)} FPS </div> ); };

FAQs

What is use-animation-frame?

A React hook to run requestAnimationFrame seamlessly

Is use-animation-frame popular?

The npm package use-animation-frame receives a total of 107 weekly downloads. As such, use-animation-frame popularity was classified as not popular.

Is use-animation-frame well maintained?

We found that use-animation-frame demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 07 May 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc