react-animate-number

number animation

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