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" }}> w3wiki </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.
How to Create Countdown Timer in React JS
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: