Library 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 |
includeComma | boolean? | false | Whether the number contains commas |
configs(1) | SpringConfig[]? | config.default | This module is using react-spring and you can refer to this config option. If you pass multiple settings, an animation is randomly assigned to each number. _ DO NOT USE duration because of a bug that hasn't been fixed yet_ |
configs(2) | (number, number): SpringConfig | none | The first parameter gives information about the number to be changed, And the second parameter gives information about the order of the changing numbers. You can use that information to adjust the animation by returning the config |
- you can use className
animated-container
to style container (example) - if you want to customize font style. Just ues
fontStyle
prop
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
animateToNumber={num}
fontStyle={{ fontSize: 40 }}
configs={[
{ mass: 1, tension: 220, friction: 100 },
{ mass: 1, tension: 180, friction: 130 },
{ mass: 1, tension: 280, friction: 90 },
{ mass: 1, tension: 180, friction: 135 },
{ mass: 1, tension: 260, friction: 100 },
{ mass: 1, tension: 210, friction: 180 },
]}
></AnimatedNumbers>
<AnimatedNumbers
animateToNumber={num}
fontStyle={{ fontSize: 32 }}
configs={(number, index) => {
return { mass: 1, tension: 230 * (index + 1), friction: 140 };
}}
></AnimatedNumbers>
<div>
<button onClick={() => setNum((state) => state + 31234)}>+</button>
<button onClick={() => setNum((state) => state - 31234)}>-</button>
</div>
</div>
);
}
export default App;
- test code
- start animation when dom is visible