mfrancekovic / react-animated-numbers Goto Github PK

View Code? Open in Web Editor NEW

👾 Library showing animation of number changes in react.js

License: MIT License

JavaScript 86.81% HTML 9.43% CSS 3.76%

react-animated-numbers's Introduction

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	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_

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