@jhonnold/react-animated-number

@jhonnold/react-animated-number

React Component to animate a number changing value

Install

npm install --save @jhonnold/react-animated-number

Getting Started

import AnimatedNumber from '@jhonnold/react-animated-number';

<AnimatedNumber number={...} />;

General

See the example to get a full understanding of functionality.

Configure

number

Type: number Required

The value to be display

initial

Type: number Default: 0

The starting value that the intial animation will begin from

fps

Type: number Default: 60

The framerate of the animation. Note, this is a maximum, not a forced framerate.

duration

Type: number Default: 250

The duration of the animation in ms.

format

Type: (value: number): string | number;

A function to format the output of an animation. i.e. Math.round

component

Type: string Default: 'p'

The element to render the animated value with.

License

MIT © jhonnold