react-number-scroll

groww style number animation

Demo

Install

npm i @hardiknaik/react-number-scroll

Usage

Functional Component

import React from "react";
import { NumberScroll } from "@hardiknaik/react-number-scroll";

const App = () => {
  return (
    <NumberScroll
      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 { NumberScroll } from "@hardiknaik/react-number-scroll";

class Example extends Component {
  render() {
    return (
      <NumberScroll
        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)
      />
    );
  }
}

Options details

Available options with example values:

<NumberScroll
  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