animation

Library showing animation of number changes in react.js

Sep 13, 2021
Library showing animation of number changes in react.js

react-animated-numbers

Library showing animation of number changes in react.js

View Demo View Github

Props

nametypedefaultdescription
animateToNumbernumbernoneNumber to be animated
fontStyleReact.CSSProperties?noneStyle of number text
includeCommaboolean?falseWhether the number contains commas
onStart(): void?undefinedFunction executed when animation is started
onFinish(): void?undefinedFunction executed when animation is finished
configsSpringConfig[]?config.defaultThis 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_

Custom Style

  • you can use className animated-container to style container (example)
  • if you want to customize font style. Just ues fontStyle prop

Example

import React from "react"; import AnimatedNumbers from "./module"; import "./App.css"; function App() { const [num, setNum] = React.useState(331231); return ( <div className="container"> <AnimatedNumbers includeComma animateToNumber={num} fontStyle={{ fontSize: 40 }} onStart={() => console.log("onStart")} onFinish={() => { console.log("onFinish!"); }} 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> <div> <button onClick={() => setNum((state) => state + 31234)}>+</button> <button onClick={() => setNum((state) => state - 31234)}>-</button> </div> </div> ); } export default App; }
Recommended