react number counter 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)}/>    }}