in

Library showing animation of number changes in react.js


react-animated-numbers

Library showing animation of number changes in react.js

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
onStart (): void? undefined Function executed when animation is started
onFinish (): void? undefined Function executed when animation is finished
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 }}
        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;

}


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

HANJI HANJI LYRICS – Navaan Sandhu

PYAAR HO JAYEGA LYRICS – VISHAL MISHRA