React Component to animate a changing value
- JavaScript 39.8%
- TypeScript 31.2%
- HTML 19.1%
- CSS 9.9%
| example | ||
| src | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc | ||
| .gitignore | ||
| .prettierrc | ||
| .travis.yml | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.test.json | ||
@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