0.18.0 • Published 3 months ago
react-animated-numbers v0.18.0
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 |
includeComma | 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
includeComma
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
Todo
- test code
- start animation when dom is visible
0.18.0
3 months ago
0.17.0
6 months ago
0.17.1
6 months ago
0.15.0
1 year ago
0.16.0
1 year ago
0.14.0
2 years ago
0.13.0
2 years ago
0.12.0
2 years ago
0.12.1
2 years ago
0.12.2
2 years ago
0.11.0
2 years ago
0.10.1
2 years ago
0.10.0
2 years ago
0.9.0
2 years ago
0.8.0
3 years ago
0.7.0
3 years ago
0.6.4
3 years ago
0.6.3
3 years ago
0.6.2
3 years ago
0.6.1
3 years ago
0.6.0
3 years ago
0.5.0
3 years ago
0.5.1
3 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.4.3
3 years ago
0.4.2
3 years ago
0.3.0
3 years ago
0.2.3
3 years ago
0.3.1
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.2.2
3 years ago
0.1.0
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago