react css change number animation code example
Example 1: react css change number animation
import AnimatedNumber from "animated-number-react";
export default class App extends Component {
state = {
value: 150,
};
handleChange = ({ target: { value } }) => {
this.setState({ value });
};
formatValue = (value) => value.toFixed(2);
render() {
return (
<div>
<input
type="number"
onChange={this.handleChange}
value={this.state.value}
/>
<AnimatedNumber
value={this.state.value}
formatValue={this.formatValue}
/>
</div>
);
}
}
Example 2: react css change number animation
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)}/> }}