Package Exports

@coderv12/react-animate-number
@coderv12/react-animate-number/dist/index.es.js
@coderv12/react-animate-number/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@coderv12/react-animate-number) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)
      comma //specify the if want comma seperated default to false (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)
        comma //specify the if want comma seperated default to false (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}
  comma
/>

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.

@coderv12/react-animate-number