# react-frame-rate

> Create smooth animation in React components with ~60FPS.

Latest version **2.1.15** (published 2025-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-frame-rate
pnpm add react-frame-rate
yarn add react-frame-rate
bun add react-frame-rate
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.1.15 |
| Published | 2025-08-18 |
| First published | 2018-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Leonid Trofymchuk |
| Maintainers | stesel23 |
| Keywords | requestAnimatioFrame, react, smooth, animation |

## Links

- npm: https://www.npmjs.com/package/react-frame-rate
- Repository: https://github.com/stesel/react-frame-rate
- Homepage: https://stesel.github.io/react-frame-rate-demo
- Issues: https://github.com/stesel/react-frame-rate/issues
- npm.io page: https://npm.io/package/react-frame-rate

## Dependencies (1)

- [react](https://npm.io/package/react.md) *

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.15 (latest) — 2025-08-18
- 2.1.14 — 2023-10-06
- 2.1.13 — 2023-10-06
- 2.1.12 — 2023-04-26
- 2.1.11 — 2022-10-03
- 2.1.1 — 2022-10-01
- 2.1.0 — 2022-10-01
- 2.0.2 — 2020-06-29
- 2.0.1 — 2020-06-29
- 2.0.0 — 2019-10-19
- 1.1.9 — 2019-10-06
- 1.1.7 — 2019-04-11
- 1.1.6 — 2019-03-28
- 1.1.5 — 2019-03-28
- 1.1.4 — 2019-03-28
- … 14 more at https://npm.io/package/react-frame-rate/versions

## README

# react-frame-rate [![Coverage](./badges/coverage-jest%20coverage.svg)](https://github.com/stesel/react-frame-rate/actions/workflows/coverage.yml) [![Build](https://github.com/stesel/react-frame-rate/actions/workflows/build.yml/badge.svg)](https://github.com/stesel/react-frame-rate/actions/workflows/build.yml) [![npm](https://img.shields.io/npm/v/react-frame-rate.svg)](https://www.npmjs.com/package/react-frame-rate)
Create smooth animation in React components with ~60FPS.

![Demo](https://raw.githubusercontent.com/stesel/react-frame-rate/master/demo.gif)

## Usage

`npm install react-frame-rate --save`
or
`yarn add react-frame-rate`

### ◦ React hook `useFrameRateManager`:
```typescript
import * as React from "react";

import { useFrameRateManager } from "react-frame-rate";

export function Counter() {
  const [counter, setCounter] = React.useState(0);

  const {
    updateCallback,
    updateFrameRate,
    updateAnimation
  } = useFrameRateManager();

  React.useEffect(() => {
    updateCallback(() => setCounter((value) => value + 1));
  }, [updateCallback, setCounter]);

  React.useEffect(() => {
    updateFrameRate(30);
  }, [updateFrameRate]);

  React.useEffect(() => {
    updateAnimation(true);
    return () => {
      updateAnimation(false);
    };
  }, [updateAnimation]);

  return <div>{counter}</div>;
}
```
#### Props:
- `updateCallback` - set callback which is called on each frame.
- `updateFrameRate` - set desired frame rate value, optimal values `60/30/20/15/10/6/5/3/1`.
- `updateAnimation`- set start/stop animation with boolean flag.

### ◦ React HOC `withReactFrameRate`:
```typescript
import * as React from "react";

import withReactFrameRate, { BaseUpdateProps } from "react-frame-rate";

type Props = Readonly<{
  counter: number;
}> &
  BaseUpdateProps;

export function Counter() {
  const [isAnimating, setIsAnimation] = React.useState(true);

  const updateState = React.useCallback<(state: Props) => Props>(
    (state: Props) => {
      const newCounter = state.counter + 1;
      if (newCounter >= 100) {
        setIsAnimation(false);
      }
      return { ...state, counter: newCounter };
    },
    [setIsAnimation]
  );

  const options = React.useMemo(
    () => ({
      updateState,
      frameRate: 30
    }),
    [updateState]
  );

  const WithAnimation = React.useMemo(
    () =>
      withReactFrameRate<Props>(options)((props: Props) => (
        <>{props.counter}</>
      )),
    [options]
  );

  return <WithAnimation counter={0} isAnimating={isAnimating} />;
}
```

#### Options:

- `updateState` - refresh state on each frame.
- `frameRate` - current frame rate for updateState.
For efficient animation use frameRate - `60/30/20/15/10/6/5/3/1`.

### [◦ Codesandbox](https://codesandbox.io/s/21zko1o25j)

### [◦ Demo](https://github.com/stesel/react-frame-rate-demo)

## Contributing

Contributing are Welcome 🎉
Please check out the [Contributing guide](CONTRIBUTING.md).

### LICENSE

[MIT License](LICENSE.md)

### Keywords

`requestAnimatioFrame` `react` `smooth animation`

---
_Source: https://npm.io/package/react-frame-rate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._