Building a Countdown Timer in React

Have you ever wanted to add a dynamic countdown timer to your React application? Whether you’re creating a productivity app, running a live event, or just want to spice up your website, a countdown timer can be a captivating and functional addition. In this article, we’ll explore how to build a simple yet powerful 1-hour countdown timer using React.js.

Setting the Stage

Before we dive into the code, let’s clarify what we aim to achieve. Our goal is to create a visually appealing countdown timer that updates in real-time, ticking down from 1 hour to zero. To accomplish this, we’ll leverage the popular React library along with the useState and useEffect hooks.

The Countdown Component

To get started, let’s create a CountdownTimer component. This component will encapsulate the countdown logic and rendering.

import React, { useState, useEffect } from 'react';

const CountdownTimer = () => {
  // Initial time in seconds (1 hour)
  const initialTime = 60 * 60;
  const [timeRemaining, setTimeRemaining] = useState(initialTime);

  useEffect(() => {
    const timerInterval = setInterval(() => {
      setTimeRemaining((prevTime) => {
        if (prevTime === 0) {
          clearInterval(timerInterval);
          // Perform actions when the timer reaches zero
          console.log('Countdown complete!');
          return 0;
        } else {
          return prevTime - 1;
        }
      });
    }, 1000);

    // Cleanup the interval when the component unmounts
    return () => clearInterval(timerInterval);
  }, []); // The empty dependency array ensures the effect runs only once on mount

  // Convert seconds to hours, minutes, and seconds
  const hours = Math.floor(timeRemaining / 3600);
  const minutes = Math.floor((timeRemaining % 3600) / 60);
  const seconds = timeRemaining % 60;

  return (
    <div>
      <p>Countdown Timer:</p>
      <p>{`${hours}h ${minutes}m ${seconds}s`}</p>
    </div>
  );
};

export default CountdownTimer;

Using the CountdownTimer Component

import React from 'react';
import CountdownTimer from './CountdownTimer';

const App = () => {
  return (
    <div>
      <h1>React Countdown Timer</h1>
      <CountdownTimer />
    </div>
  );
};

export default App;

Conclusion

By harnessing the power of React and its hooks, we’ve crafted a versatile and engaging countdown timer that you can seamlessly integrate into your projects. Feel free to customize the styling, add sound effects, or incorporate additional functionality based on your application’s requirements.

Now, go ahead and make time work for you in your next React endeavor. Happy coding!