Countdown Timer in React Js

Hello Developers, In this tutorial, You will learn to create a Countdown Timer in react js with days, hours, minutes & seconds step by step. It will be very helpful if you need to integrate a countdown timer feature in your project.

Once you complete this article, You will definitely learn to implement the React Countdown Timer feature quickly on your website, and also you will be able to set an expiry date & time according to your needs.

You can provide a countdown timer for online exams, shopping deal offers, and other purposes. So that users can complete their tasks & shop before the expiration time.

React Countdown Timer with Days, Hours, Minutes & Seconds

In this tutorial, I have created functionality to countdown timer using functional components. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Add & Remove Multiple Input Field Dynamically in React Js

How to Display Form Data in Table using React Js

Add and Delete Table Rows Dynamically using React Js

Create a Simple React Todo App

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
  |__public/
  |    |__images/
  |__src/
  |   |
  |  countdown-timer
  |       |__CountdownTimer.js
  |__App.js
  |__index.js

I have used bootstrap 4 to create a responsive weather app. So, You should install it in your react app.

For more information, you can learn How to use Bootstrap in React Js

1.  Create a Countdown Timer Component

File Name – CountdownTimer.js

import { useEffect, useState } from "react/cjs/react.development";

function CountdownTimer(){


   const [expiryTime, setExpiryTime] = useState("5 feb 2022 15:30:25");
   const [countdownTime, setCountdownTime]= useState(
       {
           countdownDays:'',
           countdownHours:'',
           countdownlMinutes:'',
           countdownSeconds:''
       }
   );

    const countdownTimer=()=>{
    
        const timeInterval= setInterval(() => {

          const countdownDateTime = new Date(expiryTime).getTime(); 
          const currentTime = new Date().getTime();
          const remainingDayTime = countdownDateTime - currentTime;
          const totalDays = Math.floor(remainingDayTime / (1000 * 60 * 60 * 24));
          const totalHours = Math.floor((remainingDayTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          const totalMinutes = Math.floor((remainingDayTime % (1000 * 60 * 60)) / (1000 * 60));
          const totalSeconds = Math.floor((remainingDayTime % (1000 * 60)) / 1000);
     
          const runningCountdownTime={
             countdownDays: totalDays,
             countdownHours: totalHours,
             countdownMinutes: totalMinutes,
             countdownSeconds: totalSeconds
          }
       
          setCountdownTime(runningCountdownTime);
     
          if (remainingDayTime < 0) {
             clearInterval(timeInterval);
             setExpiryTime(false);
            }
     
         }, 1000);
    }
     
    useEffect(() => {
        countdownTimer();
    });
   
    return(
        <div className="row">
            <div className="col-sm-6">
            <h4 className="text-center text-primary">React- Countdown Timer</h4>
            <div className="btn-group my-3">
            {expiryTime!==false?
                <>
                <button type="button" className="btn btn-outline-success">{countdownTime.countdownDays} <sub>Days</sub></button>
                <button type="button" className="btn btn-success">:</button>
                <button type="button" className="btn btn-outline-success">{countdownTime.countdownHours} <sub>Hours</sub></button>
                <button type="button" className="btn btn-success">:</button>
                <button type="button" className="btn btn-outline-success">{countdownTime.countdownMinutes} <sub>Minutes</sub></button>
                <button type="button" className="btn btn-success">:</button>
                <button type="button" className="btn btn-outline-success">{countdownTime.countdownSeconds} <sub>Seconds</sub></button>
                </>
                :<p>Deal has been Expired</p>}
         </div>
            </div>
        </div>
    )

}
export default CountdownTimer;

2. Render Countdown Timer Component

To render CountdownTimer component, you will have to import it in the App component and render it as <CountdownTimer /> within the return() method.

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import CountdownTimer from "./countdown-timer/CountdownTimer";
function App() {
  render(){
  return (
    <CountdownTimer />
  )
  }
}
export default App;

3. Run App to Perform Countdown Timer

First of all, you have to run the following command to run the app.

npm start

Now, you can see the running countdown Timer yourself  by opening the following URL in your web browser

http://localhost:3000