Library showing animation of number changes in react.js
npm install react-animated-numbersLibrary showing animation of number changes in react.js
| name | type | default | description |
| :-------------------: | :------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| animateToNumber | number | none | Number to be animated |
| fontStyle | React.CSSProperties? | none | Style of number text |
| useThousandsSeparator | boolean? | false | A value that determines whether to show a comma or not. |
| locale | string? | en-US | Formats animated number as per locale. Also it should be used with inculdeComma prop. For list of locales, search for "BCP 47 language tags" |
| transitions | (index: number) => Transition$1? | none | framer-motion transitions. The order of numbers shown is passed as a parameter. |
| className | string? | none | ClassName for style |
You have to use dynamic imports to ensure that this library is imported on the client side only.
Import the library like this:
```
import dynamic from "next/dynamic";
const AnimatedNumbers = dynamic(() => import("react-animated-numbers"), {
ssr: false,
});
Credit to @jedwardblack for this
Use the library like this:
`
"use client";
import AnimatedNumbers from "react-animated-numbers"
`
`jsx
import React from "react";
import AnimatedNumbers from "react-animated-numbers";
import "./App.css";
function App() {
const [num, setNum] = React.useState(331231);
return (
export default App;
``
!test
- [ ] test code
- [x] start animation when dom is visible