2.0.4 • Published 8 months ago
@hardiknaik/react-number-scroll v2.0.4
react-number-scroll
groww style number animation
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