React awesome animated number

A React component which animates numbers in elegant way

Live demo

Controlled number

Demo

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

Contributions

Contributions will be welcomed! Just make PRs to https://github.com/eunvanz/react-awesome-animated-number.

Have some Github contributions?

You probably like my side project 👉 https://gitkemon.com/link/sl_68A

License

react-awesome-animated-number is released under the MIT license.