Package Exports

react-animated-numbers
react-animated-numbers/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 (react-animated-numbers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Next JS (< v13.x.x )

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

Next JS (>= v13.x.x )

Use the library like this:

"use client";

import AnimatedNumbers from "react-animated-numbers"

Example

import React from "react";
import AnimatedNumbers from "react-animated-numbers";
import "./App.css";

function App() {
  const [num, setNum] = React.useState(331231);
  return (
    <div className="container">
      <AnimatedNumbers
        useThousandsSeparator
        className={styles.container}
        transitions={(index) => ({
          type: "spring",
          duration: index + 0.3,
        })}
        animateToNumber={number}
        fontStyle={{
          fontSize: 40,
          color: "red",
        }}
      />
      <div>
        <button onClick={() => setNum((state) => state + 31234)}>+</button>
        <button onClick={() => setNum((state) => state - 31234)}>-</button>
      </div>
    </div>
  );
}

export default App;

GIF

test

Todo

test code
start animation when dom is visible