react-animated-number

React component for animating numbers

Install

react-animated-number is available via npm and can be used with browserify or webpack.

npm install --save react-animated-number 

Usage

import AnimatedNumber from 'react-animated-number'; ... ...  class Demo extends Component {      ...      render () {         <AnimatedNumber component="text" value={bigValue}             style={{                 transition: '0.8s ease-out',                 fontSize: 48,                 transitionProperty:                     'background-color, color, opacity'             }}             frameStyle={perc => (                 perc === 100 ? {} : {backgroundColor: '#ffeb3b'}             )}             duration={300}             formatValue={n => prettyBytes(n)}/>     } }

API

value: number

required
Numeric value to which to tween to

initialValue: number

default: 0
Initial numeric value for the tween start

component: any

default: "span"
This is similar to the react transition API. By default, renders text inside a <span>. You can pass in any valid ReactElement. Use "text" for rendering into SVG.

formatValue: ?(n: number) => string

A callback function that accepts a number and returns a formatted string

duration: ?number

default: 300
Total duration of animation in milliseconds

frameStyle: ?(perc: number) => Object | void,

A callback function that accepts the percentage of completion of current animation and returns the style object to applied to the current frame

stepPrecision: ?number

The number of decimal places to render for intermediate values. If set to 0, rounds off the intermediate values using Math.round

Demo

A demo can be found here. Source code for the demo can be found here.

License

react-animated-number is licensed under MIT license.