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.