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.