React : Top 3 Animating Timers or Counters npm packages

Animating timers or counters in a React app can add an interactive and visually appealing element to your web pages. There are several npm packages available that provide the functionality to implement such animations in React. In this tutorial, we will go over some of the top npm packages that can help you achieve this.

1) react-countup

This package provides a simple and efficient solution to create animated counters in React. It uses the CountUp.js library to perform the animation.

Example of how you can use “react-countup” in your React component:

import React from "react";
import CountUp from "react-countup";
import "./App.css";

function App() {
  const startNumber = 0;
  const endNumber = 100;
  const duration = 2;
  const separator = ",";

  return (
    <>
      <h2>Default Configuration</h2>
      <CountUp start={startNumber} end={endNumber} />
      <h2>Duration of Animation</h2>
      <CountUp start={startNumber} end={endNumber} duration={duration} />
      <h2>Separator for Large Numbers</h2>
      <CountUp start={startNumber} end={endNumber} separator={separator} />
      <h2>Custom Formatting</h2>
      <CountUp
        start={startNumber}
        end={endNumber}
        formattingFn={(value) => value + "%"}
      />
      <h2>Start and End Numbers with Decimals</h2>
      <CountUp start={10.5} end={20.8} decimal="," />
    </>
  );
}

export default App;

Link: https://www.npmjs.com/package/react-countup

2) react-countdown

“react-countdown” is a React component that is used to display a countdown timer to a specific date and time. It provides a simple and flexible way to display a countdown timer in your React application.

Here’s an example of how to use “react-countdown” in a React component:

import React, { useState } from "react";
import Countdown from "react-countdown";

const App = () => {
  const [countdownEndDate, setCountdownEndDate] = useState(
    new Date("Jan 1, 2023 00:00:00").getTime()
  );

  return (
    <>
      <h2>Default Configuration</h2>
      <Countdown date={countdownEndDate} />

      <h2>Rendering Custom Components</h2>
      <Countdown
        date={countdownEndDate}
        renderer={({ days, hours, minutes, seconds, completed }) => {
          if (completed) {
            return <p>Time's up!</p>;
          } else {
            return (
              <>
                <p>
                  {days}d {hours}h {minutes}m {seconds}s
                </p>
              </>
            );
          }
        }}
      />

      <h2>Specifying the Interval</h2>
      <Countdown date={countdownEndDate} intervalDelay={100} />

      <h2>On Complete Callback</h2>
      <Countdown
        date={countdownEndDate}
        onComplete={() => alert("Time's up!")}
      />

      <h2>Custom Format</h2>
      <Countdown
        date={countdownEndDate}
        renderer={({ days, hours, minutes, seconds, completed }) => {
          if (completed) {
            return <p>Time's up!</p>;
          } else {
            return (
              <>
                <p>
                  {days}:{hours}:{minutes}:{seconds}
                </p>
              </>
            );
          }
        }}
      />
    </>
  );
};

export default App;

In this example, we first import the “Countdown” component from “react-countdown”. Then we use the “Countdown” component to render the countdown timer.

We use the date prop to specify the end date and time of the countdown timer. We also use the renderer prop to render custom components, the intervalDelay prop to specify the interval delay, the onComplete prop to specify the callback function that is called when the countdown timer reaches zero, and the renderer prop to specify the custom format of the countdown timer.

Link: https://www.npmjs.com/package/react-countdown

3) react-count-to

React Count-to is another popular npm package for animating counters in React. It has a simple setup process and supports customization for different animation speeds and animation easing types.

To use React Count-to in your project, start by installing it using npm or yarn:

npm install react-count-to

Next, import the component in your project:

import CountTo from 'react-count-to';

<CountTo
  from={0}
  to={1000}
  duration={5}
  delay={0}
  easing="linear"
  onComplete={() => { console.log('completed'); }}
/>

import React, { useState } from "react";
import CountTo from "react-count-to";

function App() {
  const [countTo, setCountTo] = useState(1000);

  return (
    <>
      <h2>Starting value: 0, Ending value: 1000</h2>
      <CountTo
        from={0}
        to={countTo}
        duration={5}
        speed={5000}
        delay={100}
        easing={(t) => t * t} // replace string with a function
        onComplete={() => {
          console.log("completed");
        }}
      />
      <button onClick={() => setCountTo(2000)}>Change to 2000</button>
      <h2>Starting value: 1000, Ending value: 2000</h2>
      <CountTo
        from={1000}
        to={countTo}
        duration={5}
        speed={5000}
        delay={0}
        easing={(t) => t * t} // replace string with a function
        onComplete={() => {
          console.log("completed");
        }}
      />
      <h2>Custom Easing: easeOutQuad</h2>
      <CountTo
        from={0}
        to={countTo}
        duration={5}
        speed={5000}
        delay={0}
        easing={(t) => t * t} // replace string with a function
        onComplete={() => {
          console.log("completed");
        }}
      />
      <h2>Custom Duration: 10s</h2>
      <CountTo
        from={0}
        to={countTo}
        duration={10}
        speed={5000}
        delay={0}
        easing={(t) => t * t} // replace string with a function
        onComplete={() => {
          console.log("completed");
        }}
      />
    </>
  );
}

export default App;