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      comma //specify the if want comma seperated default to false (Optional)
12    />
13  );
14};
15
16export 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        comma //specify the if want comma seperated default to false (Optional)
13      />
14    );
15  }
16}

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  comma
7/>

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.
comma	Boolean	no	false	Provide the Comma seperation if you want.

License

MIT © Hardik Naik