0.13.0 • Published 2 years ago

react-animated-numbers-ggabcd v0.13.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-animated-numbers

Library showing animation of number changes in react.js

Test

Homepage

Props

nametypedefaultdescription
animateToNumbernumbernoneNumber to be animated
fontStyleReact.CSSProperties?noneStyle of number text
includeCommaboolean?falseWhether the number contains commas
configs(1)SpringConfig[]?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
configs(2)(number, number): SpringConfignoneThe 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

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

Todo

  • test code
  • start animation when dom is visible