React-awesome-animated-number NPM

React awesome animated number

A React component which animates numbers in elegant way

Example

Live demo

Controlled number

Code

import { useCallback, useState } from "react";
import { Button, Box, Switch, TextField } from "@mui/material";
import { random } from "lodash-es";

import AnimatedNumber from "react-awesome-animated-number";
import "react-awesome-animated-number/dist/index.css";

export const WithController = () => {
  const [number, setNumber] = useState(random(0, 100000000));
  const [hasComma, setHasComma] = useState(true);
  const [size, setSize] = useState(28);
  const [duration, setDuration] = useState(200);

  const increaseNumber = useCallback(() => {
    setNumber((number) => number + random(0, 100000000));
  }, []);

  const decreaseNumber = useCallback(() => {
    setNumber((number) => number - random(0, 100000000));
  }, []);

  return (
    <>
      <AnimatedNumber
        value={number}
        hasComma={hasComma}
        size={size}
        duration={duration}
      />
      <Box sx={{ mt: 4 }}>
        <Box sx={{ display: "flex", mt: 2 }}>
          <TextField
            type="number"
            value={number}
            size="small"
            label="Value"
            onChange={(e) => setNumber(Number(e.target.value))}
          />
          <Button
            variant="contained"
            size="small"
            sx={{ ml: 1 }}
            onClick={increaseNumber}
          >
            Increase Number
          </Button>
          <Button
            variant="contained"
            size="small"
            sx={{ ml: 1 }}
            onClick={decreaseNumber}
          >
            Decrease Number
          </Button>
        </Box>
        <Box sx={{ display: "flex", alignItems: "center", mt: 2 }}>
          <Switch checked={hasComma} onChange={(_, checked) => setHasComma(checked)} />{" "}
          Comma
        </Box>
        <Box sx={{ mt: 2 }}>
          <TextField
            type="number"
            value={size}
            size="small"
            label="Size"
            onChange={(e) => setSize(Number(e.target.value))}
          />
        </Box>
        <Box sx={{ mt: 2 }}>
          <TextField
            type="number"
            value={duration}
            size="small"
            label="Duration"
            onChange={(e) => setDuration(Number(e.target.value))}
          />
        </Box>
      </Box>
    </>
  );
};

Timer

Demo

Code

import { useEffect, useMemo, useRef, useState } from "react";

import AnimatedNumber from "./AnimatedNumber";
import "react-awesome-animated-number/dist/index.css";

export const Timer = () => {
  const [currentTime, setCurrentTime] = useState(1000 * 60 * 60 * 10 + 10 * 1000);

  const timerRef = useRef<number | null>(null);

  useEffect(() => {
    timerRef.current = window.setInterval(() => {
      setCurrentTime((currentTime) => currentTime - 1000);
    }, 1000);
    return () => {
      window.clearInterval(timerRef.current);
    };
  }, []);

  const { hours, minutes, seconds } = useMemo(() => {
    const hours = Math.floor(currentTime / 1000 / 60 / 60);
    const minutes = Math.floor((currentTime / 1000 / 60) % 60);
    const seconds = Math.floor((currentTime / 1000) % 60);
    return { hours, minutes, seconds };
  }, [currentTime]);

  return (
    <div style={{ fontSize: 40 }}>
      <AnimatedNumber size={40} value={hours} minDigits={2} /> :{" "}
      <AnimatedNumber size={40} value={minutes} minDigits={2} /> :{" "}
      <AnimatedNumber size={40} value={seconds} minDigits={2} />
    </div>
  );
};

Props

name	type	required	default	description
value	`number`	O		Number to animate
size	`number`		`14`	Font size of number in `px`
hasComma	`boolean`		`false`	Set `true` for locale string
duration	`number`		`200`	Animation duration in `ms`
order	`"asc"`, `"desc"`		`"asc"`	Order of numbers for each digit
minDigits	`number`		`undefined`	Minimum number of digits to show(`0` will be padded to number as this)