How to Create Countdown Timer in React JS
Last Updated :
09 Jan, 2025
React timers are very common UI components that are widely used in various applications and websites to visually display the remaining time for a specific activity or event. React timers are mostly used to highlight the commencement or conclusion of events or offers on commercial websites.
This tutorial explores the process of creating a countdown timer using React JS, a popular JavaScript user interface toolkit.
Preview of final output:
Output Preview
Prerequisites
Approach to Create a Countdown Timer Using React JS
Here, we have 2 approaches to create the countdown timer given below
- Using React Hooks with Functional Components
- Using React State with the Class based Components
Steps to Create Countdown Timer Using React JS
Before creating a timer in React JS, you should be familiar with these terminologies:
- getTimeRemaining: Compute the difference between the target timer and the current time we have. This function will check the time left from the target timer by doing calculations and return a total number of hours, minutes, and seconds.
- StartTimer: This function will start timing down from getting a total number of hours, minutes, and seconds from the getTimeRemaining function.
- ClearTimer: This function is used to reset the timer, which means If you restart the timer it clears the time remaining from the previous countdown, otherwise it starts parallel two-timing down or it may collapse each other.
- getDeadTimer: This function provides the deadline of the timer means it gives time from where you want to start the countdown. In this, you have to add time if you want to extend. We have used this in two scenarios first when the page is loaded and second when someone clicks the reset button.
Steps to Create React Application
Countdown timers are great for various applications, including events and promotions.
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Approach 1: Create Countdown Timer Using React Hooks
We can create a countdown timer using React hooks and the setInterval method of JavaScript.
We use React hooks like useState, useRef and useEffect
We have provided the working code to properly demonstrate how to create a countdown timer using the React Hooks with Functional Components.
React Countdown Timer using React Hooks Example
This example implements a countdown timer in React using React Hooks and the JavaScript setInterval() method.
JavaScript
// Filename - App.js
import React, { useState, useRef, useEffect } from "react";
const App = () => {
// We need ref in this, because we are dealing
// with JS setInterval to keep track of it and
// stop it when needed
const Ref = useRef(null);
// The state for our timer
const [timer, setTimer] = useState("00:00:00");
const getTimeRemaining = (e) => {
const total =
Date.parse(e) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor(
(total / 1000 / 60) % 60
);
const hours = Math.floor(
(total / 1000 / 60 / 60) % 24
);
return {
total,
hours,
minutes,
seconds,
};
};
const startTimer = (e) => {
let { total, hours, minutes, seconds } =
getTimeRemaining(e);
if (total >= 0) {
// update the timer
// check if less than 10 then we need to
// add '0' at the beginning of the variable
setTimer(
(hours > 9 ? hours : "0" + hours) +
":" +
(minutes > 9
? minutes
: "0" + minutes) +
":" +
(seconds > 9 ? seconds : "0" + seconds)
);
}
};
const clearTimer = (e) => {
// If you adjust it you should also need to
// adjust the Endtime formula we are about
// to code next
setTimer("00:00:10");
// If you try to remove this line the
// updating of timer Variable will be
// after 1000ms or 1sec
if (Ref.current) clearInterval(Ref.current);
const id = setInterval(() => {
startTimer(e);
}, 1000);
Ref.current = id;
};
const getDeadTime = () => {
let deadline = new Date();
// This is where you need to adjust if
// you entend to add more time
deadline.setSeconds(deadline.getSeconds() + 10);
return deadline;
};
// We can use useEffect so that when the component
// mount the timer will start as soon as possible
// We put empty array to act as componentDid
// mount only
useEffect(() => {
clearTimer(getDeadTime());
}, []);
// Another way to call the clearTimer() to start
// the countdown is via action event from the
// button first we create function to be called
// by the button
const onClickReset = () => {
clearTimer(getDeadTime());
};
return (
<div
style={{ textAlign: "center", margin: "auto" }}>
<h1 style={{ color: "green" }}>
GeeksforGeeks
</h1>
<h3>Countdown Timer Using React JS</h3>
<h2>{timer}</h2>
<button onClick={onClickReset}>Reset</button>
</div>
);
};
export default App;
Steps To Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Explanation:
- First, initialize a state ‘timer‘ and a ref ‘Ref‘ to manage time and interval.
- useEffect Hook starts the timer by calling clearTimer.
- getTimeRemaining Function calculates the remaining time from a future deadline
- startTimer Function updates the timer display every second based on the remaining time.
- clearTimer Function resets the timer to 10 seconds and starts the countdown.
- getDeadTime Function calculates the deadline time for the countdown.
- onClickReset Function resets the timer to 10 seconds when the “Reset” button is clicked.
- Return JSX displays the timer value and a “Reset” button in the UI.
Approach 2: Create Countdown Timer Using React State in Class Components
We can create a countdown timer using React states in class components and the setInterval method of JavaScript.
We will be using the React setState method and createRef methods to updated the timer in the state variable.
We have provided the working code to properly demonstrate how to create a countdown timer using the React States with Class Components.
Countdown timer using React States Example:
JavaScript
// Filename - App.js
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
// We need ref in this, because we are dealing
// with JS setInterval to keep track of it and
// stop it when needed
this.Ref = React.createRef();
// The state for our timer
this.state = {
timer: "00:00:00",
};
}
getTimeRemaining = (e) => {
const total = Date.parse(e) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / 1000 / 60 / 60) % 24);
return {
total,
hours,
minutes,
seconds,
};
};
startTimer = (e) => {
let { total, hours, minutes, seconds } = this.getTimeRemaining(e);
if (total >= 0) {
// update the timer
// check if less than 10 then we need to
// add '0' at the beginning of the variable
this.setState({
timer:
(hours > 9 ? hours : "0" + hours) +
":" +
(minutes > 9 ? minutes : "0" + minutes) +
":" +
(seconds > 9 ? seconds : "0" + seconds),
});
}
};
clearTimer = (e) => {
// If you adjust it you should also need to
// adjust the Endtime formula we are about
// to code next
this.setState({ timer: "00:00:10" });
// If you try to remove this line the
// updating of timer Variable will be
// after 1000ms or 1sec
if (this.Ref.current) clearInterval(this.Ref.current);
const id = setInterval(() => {
this.startTimer(e);
}, 1000);
this.Ref.current = id;
};
getDeadTime = () => {
let deadline = new Date();
// This is where you need to adjust if
// you extend to add more time
deadline.setSeconds(deadline.getSeconds() + 10);
return deadline;
};
// We can use componentDidMount so that when the component
// mount the timer will start as soon as possible
componentDidMount() {
this.clearTimer(this.getDeadTime());
}
// Another way to call the clearTimer() to start
// the countdown is via action event from the
// button first we create function to be called
// by the button
onClickReset = () => {
this.clearTimer(this.getDeadTime());
};
render() {
return (
<div style={{ textAlign: "center", margin: "auto" }}>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h3>Countdown Timer Using React JS</h3>
<h2>{this.state.timer}</h2>
<button onClick={this.onClickReset}>Reset</button>
</div>
);
}
}
export default App;
Output: Now open your browser and go to http://localhost:3000
Explanation:
- First, initialize a state ‘timer‘ and a ref ‘Ref‘ using createRef() to manage time and interval.
- In
componentDidMount initiate the countdown by calling the clearTimer function. - getTimeRemaining Function calculates the remaining time from a future deadline
- startTimer Function updates the timer display every second based on the remaining time.
- clearTimer Function resets the timer to 10 seconds and starts the countdown.
- getDeadTime Function calculates the deadline time for the countdown.
- onClickReset Function resets the timer to 10 seconds when the “Reset” button is clicked.
- Return JSX displays the timer value and a “Reset” button in the UI.
Wrapping Up
React timer is a very useful component in website UI, as it helps in making events more interactive. This tutorial teaches how to create a countdown timer using React JS for your projects. Explained with live working code, this guide provides an easy solution to build a React timer.
We have used React Hooks and setTimer() method to create a countdown timer in React JS. Hope this guide, helps you build your first timer using React JS.
Similar Reads
How to Create Countdown Timer using React Native ?
Our main objective focuses on constructing a straightforward and useÂr-friendly countdown timer that impeccably showcaseÂs the remaining time leÂft in terms of years, days, hours, minutes, and seconds until a specific date. To set up your deÂvelopment environment, begin by installing Node.js. Next,
4 min read
How To Create A Countdown Timer Using JavaScript
A countdown timer is a timer that runs for a specific time limit and when that limit get crossed then it stops the timer and the message get displayed on the screen. it can be used for a website or blog to display the countdown to any special event, such as a birthday or anniversary. The Basics of a
4 min read
How to create Time Picker in ReactJS ?
Time pickers provide a simple way to select a single value from a pre-determined set. Material UI for React has this component available for us and it is very easy to integrate. We can create a Time Picker in ReactJS using the following approach: Creating React Application And Installing Module: Ste
2 min read
How to create components in ReactJS ?
Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C
3 min read
How to create Popup box in React JS ?
Popup boxes, also known as modal or dialog boxes, are common UI elements used to display additional content or interactions on top of the main page. Creating a popup box in React can be achieved using various approaches, including libraries or custom implementations. We will use the Reactjs-popup li
2 min read
Event Countdown Timer Using React
Event Countdown Timer is an application where you can create an event with the name, date, and category of the event and it will create a card that will show you the remaining time of the event. After reaching that time of the day it will notify you. The application will provide the option to start,
5 min read
How to create a Read More component in ReactJS?
Creating a Read More component in React JS refers to hiding and displaying the text content on the page. It can be achieved by setting the state variable and display the content accordingly. PrerequisitesNode.JS and npmReact JSReact JS useState() hookApproachTo create a Read More component in React
3 min read
How to add Timer in Next.js ?
In this article, we are going to learn how we can add Timer in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.
2 min read
How to create a simple counter Using ReactJS?
React counter app is a program that allows users to interact with a numerical counter value. It demonstrates basic state management and user interaction within a user interface. Prerequisites:NPM & Node.js React JSReact useState hookApproach:Building a simple counter application is a great way t
2 min read
How to create Class Component in React?
JavaScript syntax extension permits HTML-like code within JavaScript files, commonly used in React for defining component structure. It simplifies DOM element manipulation by closely resembling HTML syntax. JSX facilitates the creation of reusable UI building blocks, defined as JavaScript functions
2 min read