Skip to content

heyman333/react-animated-numbers

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 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

Custom Style

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

Next JS

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

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

About

šŸ‘¾ Library showing animation of number changes in react.js

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published