@theankur/react-animated-numbers v0.2.2

react-animated-numbers

Library showing animation of number changes in react.js

Test

Homepage

Props

Example

import React from 'react';
import AnimatedNumber from "react-animated-numbers"

function App() {
  const [number, setNumber] = React.useState(0)
  const [diff, setDiff] = React.useState(0)

  const increaseNumber = () => {
    setNumber(number + diff)
  }

  const decreaseNumber = () => {
    setNumber(number - diff)
  }

  const onChangeValue = (e) => {
    const number = Number(e.target.value)
    setDiff(number)
  }

  return (
    <div className="App">
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
          flexDirection: "column",
        }}
      >
        <label htmlFor="value">Number Difference</label>
        <input
          id="value"
          title="value"
          placeholder="Difference"
          type="number"
          style={{ marginBottom: 30 }}
          onChange={onChangeValue}
        />
        <AnimatedNumber
          fontStyle={{ fontFamily: "Nunito", fontSize: 40 }}
          animateToNumber={number}
          includeComma
          config={{ tension: 89, friction: 40 }}
          onStart={() => console.log("onStart")}
          onFinish={() => console.log("onFinish")}
          animationType={"calm"}
        />
        <div
          style={{
            height: 60,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            marginTop: 40,
          }}
        >
          <button onClick={increaseNumber}>increase Number</button>
          <button onClick={decreaseNumber}>decrease Number</button>
        </div>
      </div>
    </div>
  )
}