react-animated-numbers

Library showing animation of number changes in react.js

Props

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

$3

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

$3

Use the library like this:

`
"use client";

import AnimatedNumbers from "react-animated-numbers"
`

$3

`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;
``

$3

!test

Todo

- [ ] test code
- [x] start animation when dom is visible