react-animate-number

number animation

Demo

Install

1npm i @hardiknaik/react-animate-number

Usage

Functional Component

1import React from "react";
2import AnimatedNumbers from "@hardiknaik/react-animate-number";
3
4const App = () => {
5  return (
6    <AnimatedNumbers
7      number={444} // specify the number
8      className="text-yellow" // specify the Class name (Optional)
9      style={{ background: "red" }} // specify the Style (Optional)
10      decimal={2} // specify the Decimal Places default to 0 (Optional)
11    />
12  );
13};
14
15export default App;

Class Component

1import React, { Component } from "react";
2import AnimatedNumbers from "@hardiknaik/react-animate-number";
3
4class Example extends Component {
5  render() {
6    return (
7      <AnimatedNumbers
8        number={444} // specify the number
9        className="text-yellow" // specify the Class name (Optional)
10        style={{ background: "red" }} // specify the Style (Optional)
11        decimal={2} // specify the Decimal Places default to 0 (Optional)
12      />
13    );
14  }
15}

Customization

Change the below css variale to modify the colour and animation speed

1:root {
2  /* Change the Animation Speed in ms or s */
3  --duration: 500ms;
4  /* Change the colour of the number when number will be incrementing */
5  --increment: #00b200;
6  /* Change the colour of the number when number will be decrementing */
7  --decerement: red;
8}

Options details

Available options with example values:

1<AnimatedNumbers
2  number={444}
3  className="text-yellow"
4  style={{ background: "red" }}
5  decimal={2}
6/>

Parameter	Type	Required	Defaults	Description
number	Number	yes	-	Provide the number you want to animate.
className	String	no	-	Provide the Class Name.
style	CSS Object	no	-	Provide the Style.
decimal	Number	no	0	Provide the Decimal places you want to show to the number.

License

MIT © Hardik Naik