1import AnimatedNumber from "animated-number-react";
2
3export default class App extends Component {
4 state = {
5 value: 150,
6 };
7 handleChange = ({ target: { value } }) => {
8 this.setState({ value });
9 };
10 formatValue = (value) => value.toFixed(2);
11 render() {
12 return (
13 <div>
14 <input
15 type="number"
16 onChange={this.handleChange}
17 value={this.state.value}
18 />
19 <AnimatedNumber
20 value={this.state.value}
21 formatValue={this.formatValue}
22 />
23 </div>
24 );
25 }
26}
1import 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)}/> }}