How To Create a CountDown Timer In React App — Typescript Version

A step by step guide with example project

Bhargav Bachina
Apr 12 · 4 min read

In web development, it’s very common to have a countdown timer in place. There are some scenarios in which something should be done on the website at a specific time or You want to redirect a group of users to an event streaming on your website. Whichever the case, we need to implement a countdown timer in the apps.

In this post, we will see how we can implement a timer in the React applications with typescript.

  • Prerequisites
  • Example Project
  • Implementation
  • Demo
  • Summary
  • Conclusion

Prerequisites

There are some prerequisites for this project you should know or install on your laptop if you want to run on your local machine.

If you are not familiar with how to set up or start the react project. Please follow the below guide.

How To Get Started With React

Example Project

Here is an example project that you can clone on your machine and run on your machine.

// clone the project
git clone https://github.com/bbachi/countdown-timer-react-ts.git
// install and run
npm install
npm start

Once the project is started on port 3000 you can see the app running as below.

App

Implementation

Let’s implement the count-down timer step by step. First, you need to install create-react-app globally on your laptop with the following command.

npm install -g create-react-app

Let’s create an app with this tool with the following command

npx create-react-app countdown-timer-react-ts --template typescript

You can see the output below.

Creating a React App

You can change the directory and start the application and you should see it running on port 3000.

// change the directory
cd countdown-timer-react-ts
// start the app
npm start
Starting the Project
React App Running on port 3000

Let’s add styles to the App.css file as below.

App.css

Replace the App.js with the below file.

App.js

You can now see the below screen now.

App Screen

It’s time to implement the actual logic. Let’s create a component called CountDownTimer() and put the below logic.

CountDownTimer Component

We have implemented React Countdown Timer with React Hooks, setInterval. We have a reset function that can be invoked whenever the timer hits zero. Let’s import this component in the App component as below.

App

We can even pass the minutes, hours, and seconds so that the timer starts counting down from it as below.

Demo

Here is the Demo. The count-down timer starts counting down from the prop values whenever we refresh the page.

Count Down Timer

Summary

  • In web development, it’s very common to have a countdown timer in place.
  • There are some scenarios in which something should be done on the website at a specific time or You want to redirect a group of users to an event streaming on your website.
  • We have implemented React Countdown Timer with React Hooks, setInterval. We have a reset function that can be invoked whenever the timer hits zero.

Conclusion

This is a very simple implementation that will be enough for most of the use cases. You can customize it more with passing props, event handlers, etc. Always wrap functionality in the component as we did in this article.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store