An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Techcrunch
- Just Creative
- Pearsonified
- Smashing Apps
- Line 25
- Wal You
- CSS Tricks
- Design Modo
- Android Dissected
- TechPowerUp
Help Webnuz
Referal links:
Create a custom React stopwatch timer component
In this tutorial well be creating a React stopwatch timer component. The completed stopwatch component will display minutes, seconds, and milliseconds with start, stop, and reset functionality.
Lets get started by setting up a dev environment using Create React App:
npx create-react-app react-stopwatch
Next create a new Stopwatch.js file in the /src folder:
import React, { useState, useEffect } from "react";const Stopwatch = () => { //...};export default Stopwatch;Well be using two React Hooks, firstly useState which allows us to store state in a function based component. Itll be used to store the stopwatch time and also whether or not the stopwatch is running. The useEffect Hook checks if the timer is running and if so updates the time.
In the Stopwatch() function well first declare variables for the time and running states:
const Stopwatch = () => { const [time, setTime] = useState(0); const [running, setRunning] = useState(false); //...};Then well calculate the time using a useEffect() Hook & setInterval() method:
const Stopwatch = () => { const [time, setTime] = useState(0); const [running, setRunning] = useState(false); useEffect(() => { let interval; if (running) { interval = setInterval(() => { setTime((prevTime) => prevTime + 10); }, 10); } else if (!running) { clearInterval(interval); } return () => clearInterval(interval); }, [running]); //...};To complete the component well output the time along with control buttons:
const Stopwatch = () => { const [time, setTime] = useState(0); const [running, setRunning] = useState(false); useEffect(() => { let interval; if (running) { interval = setInterval(() => { setTime((prevTime) => prevTime + 10); }, 10); } else if (!running) { clearInterval(interval); } return () => clearInterval(interval); }, [running]); return ( <div className="stopwatch"> <div className="numbers"> <span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span> <span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}:</span> <span>{("0" + ((time / 10) % 100)).slice(-2)}</span> </div> <div className="buttons"> <button onClick={() => setRunning(true)}>Start</button> <button onClick={() => setRunning(false)}>Stop</button> <button onClick={() => setTime(0)}>Reset</button> </div> </div> );};The time is calculated by dividing the time by the number of milliseconds for each unit of time. We then use the remainder operator % to calculate if the time is divisible by 60 for seconds, 60 for minutes and, 100 for milliseconds. For example 1 minute 20 seconds is 80000 milliseconds so to calculate the seconds we do (80000 / 1000) % 60 = 20. Without the remainder operator (80000 / 1000) = 80 we just get the total seconds.
Finally replace the contents of App.js to import and load the stopwatch component:
import Stopwatch from "./Stopwatch";const App = () => { return ( <div className="App"> <Stopwatch /> </div> );};export default App;Thats all for this tutorial, hopefully itll serve as a starting point for you to build more complex time based applications. Whilst youre here be sure to checkout our ever expanding collection of practical React tutorials.
Original Link: https://dev.to/michaelburrows/create-a-custom-react-stopwatch-timer-component-de1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To