@hardiknaik/react-onboarding-swiper

react-animate-number

number animation

Demo

Install

npm i @hardiknaik/react-animate-number

Usage

Functional Component

import React from "react";
import AnimatedNumbers from "@hardiknaik/react-animate-number";

const App = () => {
  return (
    <AnimatedNumbers
      number={444} // specify the number
      className="text-yellow" // specify the Class name (Optional)
      style={{ background: "red" }} // specify the Style (Optional)
      decimal={2} // specify the Decimal Places default to 0 (Optional)
    />
  );
};

export default App;

Class Component

import React, { Component } from "react";
import AnimatedNumbers from "@hardiknaik/react-animate-number";

class Example extends Component {
  render() {
    return (
      <AnimatedNumbers
        number={444} // specify the number
        className="text-yellow" // specify the Class name (Optional)
        style={{ background: "red" }} // specify the Style (Optional)
        decimal={2} // specify the Decimal Places default to 0 (Optional)
      />
    );
  }
}

Customization

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

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

Options details

Available options with example values:

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

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