react-animated-numbers
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published
    npm version

    react-animated-numbers

    Library showing animation of number changes in react.js

    Test

    Homepage

    Props

    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 config.default 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

    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
    • [x] start animation when dom is visible

    Install

    npm i react-animated-numbers

    DownloadsWeekly Downloads

    963

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    52.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • youngsoohan