DEV Community: Nonish J.

How to create a Stopwatch in React ⏱️?

Nonish J. — Tue, 16 Jan 2024 06:01:25 +0000

What is Stopwatch ?

A Stopwatch which can be started and stopped by pressing a button, so that you can measure exactly how long something takes.

In this blog we learn to create stopwatch which show hours, minutes, seconds and milliseconds in ReactJs. By the end of this article, you will have a clear understanding of how to build a functional stopwatch in React.

Source Code : codesandbox

Project Setup

First, you need to create a React project. In the terminal of your text editor and at your chosen directory, type in this command :

npx create-react-app stopwatch-app

Create initial state :

Create two variable state for determine time and current running status of watch.

  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

Add handlers for start & stop and reset :

Lets create two onClick handlers one for play and stop the watch and other to reset the watch.

  const onHandlePlayAndStop = () => {
    setIsRunning((pre) => !pre);
  };

  const onHandleReset = () => {
    setIsRunning(false);
    setTime(0);
  };

Add time logic :

Lets take variables to show hours, minutes ,seconds and milliseconds apply with logic.

  const hours = Math.floor(time / 360000);
  const mins = Math.floor((time % 36000) / 6000);
  const secs = Math.floor((time % 6000) / 100);
  const milliSecs = Math.floor(time % 100);

Add UI to show watch with styles.

Now, create watch and show all time varialbes and add padStart() function to show double numbers on screen like exact as a stopwatch.

//Stopwatch.jsx
 <div className="stopwatch-container">
      <div className="stopwatch-wrapper">
        <h2>Stopwatch ⏱️</h2>
        <div className="stopwatch-timer">
          {hours.toString().padStart(2, "0")}:{mins.toString().padStart(2, "0")}
          :{secs.toString().padStart(2, "0")}:
          {milliSecs.toString().padStart(2, "0")}
        </div>
        <div className="stopwatch-btn-wrapper">
          <button onClick={onHandlePlayAndStop} className="stopwatch-btn">
            {isRunning ? "Pause" : "Play"}
          </button>
          <button onClick={onHandleReset} className="stopwatch-btn">
            Reset
          </button>
        </div>
      </div>
    </div>

Adding styles

//Styles.css

body {
  background-image: url("https://images.pexels.com/photos/339119/pexels-photo-339119.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.stopwatch-wrapper {
  padding: 10px 50px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.9px);
  -webkit-backdrop-filter: blur(4.9px);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.stopwatch-wrapper h2 {
  color: #fff;
}

.stopwatch-timer {
  font-size: 80px;
  color: #fff;
}

.stopwatch-btn-wrapper {
  display: flex;
  justify-content: space-between;
}

.stopwatch-btn-wrapper button {
  width: 48%;
  border: none;
  border-radius: 5px;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.stopwatch-btn-wrapper button:first-child {
  background-color: green;
}

.stopwatch-btn-wrapper button:last-child {
  background-color: red;
}

Managing States using side-effects

To make it working we will use Web-API : setInterval() function and apply inside a useEffect hook and after updating the time state, we will clear the effect by using return clearInterval() function.

  useEffect(() => {
    let intervalCall;
    if (isRunning) {
      intervalCall = setInterval(() => setTime((pre) => pre + 1), 10);
    }
    return () => clearInterval(intervalCall);
  }, [isRunning]);

Full Code is here :

//Stopwatch.jsx
import { useEffect, useState } from "react";
import "./styles.css";

const Stopwatch = () => {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let intervalCall;
    if (isRunning) {
      intervalCall = setInterval(() => setTime((pre) => pre + 1), 10);
    }
    return () => clearInterval(intervalCall);
  }, [isRunning]);

  const hours = Math.floor(time / 360000);
  const mins = Math.floor((time % 36000) / 6000);
  const secs = Math.floor((time % 6000) / 100);
  const milliSecs = Math.floor(time % 100);

  const onHandlePlayAndStop = () => {
    setIsRunning((pre) => !pre);
  };

  const onHandleReset = () => {
    setIsRunning(false);
    setTime(0);
  };

  return (
    <div className="stopwatch-container">
      <div className="stopwatch-wrapper">
        <h2>Stopwatch ⏱️</h2>
        <div className="stopwatch-timer">
          {hours.toString().padStart(2, "0")}:{mins.toString().padStart(2, "0")}
          :{secs.toString().padStart(2, "0")}:
          {milliSecs.toString().padStart(2, "0")}
        </div>
        <div className="stopwatch-btn-wrapper">
          <button onClick={onHandlePlayAndStop} className="stopwatch-btn">
            {isRunning ? "Pause" : "Play"}
          </button>
          <button onClick={onHandleReset} className="stopwatch-btn">
            Reset
          </button>
        </div>
      </div>
    </div>
  );
};

export default Stopwatch;

//style.css
body {
  background-image: url("https://images.pexels.com/photos/339119/pexels-photo-339119.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.stopwatch-wrapper {
  padding: 10px 50px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.9px);
  -webkit-backdrop-filter: blur(4.9px);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.stopwatch-wrapper h2 {
  color: #fff;
}

.stopwatch-timer {
  font-size: 80px;
  color: #fff;
}

.stopwatch-btn-wrapper {
  display: flex;
  justify-content: space-between;
}

.stopwatch-btn-wrapper button {
  width: 48%;
  border: none;
  border-radius: 5px;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.stopwatch-btn-wrapper button:first-child {
  background-color: green;
}

.stopwatch-btn-wrapper button:last-child {
  background-color: red;
}

Result :

Conclusion:

By apply these steps, you've successfully created a stopwatch in React. And also Understanding the logic behind this for building more complex applications. Thanks for reading.

Happy coding!

Follow Me on Social Media!

If you found this blog helpful, feel free to connect with me on LinkedIn and follow me on github too for more programming tips and tutorials.

LinkedIn: https://www.linkedin.com/in/nonish-jain-707397169

Github : https://github.com/Nonish

How to Build a Stepper Component in React 🤔 ?

Nonish J. — Mon, 15 Jan 2024 19:46:03 +0000

What is Stepper Component in React ?

The Stepper component enables the user to create a sequence of logical steps that visualises progress.
It could also be used for navigation purposes.

Key Features

Display Modes—The various display modes allow you to configure the step layout and type.
Linear Mode—The linear mode requires the user to complete the previous step before proceeding to the next one.
Orientation—You can switch between horizontal and vertical orientation.
Validation—You can set the validation logic for each step.
Custom Rendering—The Stepper allows you to customise the rendering of each step.
Keyboard Navigation—The Stepper supports various keyboard shortcuts.
Accessibility—The Stepper component is accessible by screen readers and provides full WAI-ARIA support.

Prerequisite:

Project Setup

First, you need to create a React project. In the terminal of your text editor and at your chosen directory, type in this command:

npx create-react-app stepper-app

Then, Go to the directory ‘src’ execute the command prompt there and run the command

npm i scss

Build and Add Functionality to the Stepper Layout

In the below code, I create the basic stepper look: a rounded circle with a grey background, and a short line right of it. They will both be repeated, depending on the number of steps we want to show.

For mapping the array we use javascript inbuilt Array() function then use fill() to insert react fragment into it and render the basic div tag. And same create two button for back froth functionality and styled with some basic css.

And to hide the last div element we use isHide() which return boolean value if mapping index is equal to the no of steps.Then we add onClick handle on both buttons and add functionality with condition within it to back and forth the stepper value. Also added some basic and conditional style to show the stepper effect respectively.

And at last we pass the props in out Stepper component to get the current value of stepper which will be match with mapping index and show the correct stepper position on srceen.

Here's the final code for the App component:

//App.jsx

import { Fragment, memo, useState } from "react";
import "./stepper.scss"

const App = () => {
   const [currentStep, setCurrentStep] = useState(0)
   const NUMBER_OF_STEPS = 5;

   return (
      <div>
         <h1>Stepper : {currentStep}</h1>
         <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
         <div className="btn-wrapper">
            <button onClick={() => setCurrentStep(pre => pre === 0 ? pre : pre - 1)}>
               Previous
            </button>
            <button
               onClick={() => setCurrentStep(pre => pre === NUMBER_OF_STEPS ? pre : pre + 1)}>
               Next
            </button>
         </div>
      </div>
   )
}

export default App;

// eslint-disable-next-line react/prop-types
const Stepper = memo(function Stepper({ currentStep, numberOfSteps }) {
   const isHide = (index) => index === numberOfSteps - 1;
   return (
      <div className="stepper-wrapper">
         {Array(numberOfSteps).fill(<></>).map((_, index) => {
            return (<Fragment key={index}>
               <div className={`stepper-circle ${currentStep >= index ? "isActive" : ""}`}></div>
               {!isHide(index) && <div className={`stepper-line  ${currentStep > index ? "isActive" : ""}`}></div>}
            </Fragment>)
         })}
      </div>
   )
})

//Stepper.jsx

.stepper-wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
}

.stepper-circle{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: rgba(182, 177, 177, 0.5);
}

.stepper-line{
   width: 40px;
   height: 5px;
   background-color: rgba(182, 177, 177, 0.5);
}

.isActive{
   background-color: aqua;
}

.btn-wrapper{
   display: flex;
   justify-content: space-between;
   margin-top: 50px;
}

.btn-wrapper > button{
   width: 40%;
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
   font-size: 16px;
   font-weight: 700;
}

And that's it! You've successfully built a stepper component in a React project. The working code demo is here , kindly check out codesandbox. Please let me know your thoughts and suggestions about this article.

Thanks for reading !!!

Happy Coding.