Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

countdown in react js

import React from 'react'
import { useState, useEffect } from 'react';

const Timer = (props:any) => {
    const {initialMinute = 0,initialSeconds = 0} = props;
    const [ minutes, setMinutes ] = useState(initialMinute);
    const [seconds, setSeconds ] =  useState(initialSeconds);
    useEffect(()=>{
    let myInterval = setInterval(() => {
            if (seconds > 0) {
                setSeconds(seconds - 1);
            }
            if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(myInterval)
                } else {
                    setMinutes(minutes - 1);
                    setSeconds(59);
                }
            } 
        }, 1000)
        return ()=> {
            clearInterval(myInterval);
          };
    });

    return (
        <div>
        { minutes === 0 && seconds === 0
            ? null
            : <h1> {minutes}:{seconds < 10 ?  `0${seconds}` : seconds}</h1> 
        }
        </div>
    )
}

export default Timer;
Comment

react countdown

yarn add react-countdown
Comment

PREVIOUS NEXT
Code Example
Javascript :: @react-google-maps/api npm 
Javascript :: javascript take last element of array 
Javascript :: format number with commas js 
Javascript :: add value to array javascript 
Javascript :: Sort big numbers from an array in javascript 
Javascript :: push an property and value to an object in javascript 
Javascript :: difference between indexof and search in javascript 
Javascript :: largest number javascript 
Javascript :: how to make a translator in javascript 
Javascript :: set auth header on axios instance 
Javascript :: how to hide react navigation header in react native 
Javascript :: deleteOne 
Javascript :: js Float32Array to percentage 
Javascript :: how to erase spaces from a string javascript 
Javascript :: javascript canvas beziercurveto 
Javascript :: react-native eject not working 
Javascript :: es6 array sum javascript 
Javascript :: change px string to number 
Javascript :: disable button in jsx 
Javascript :: data type javascript 
Javascript :: puppeeter mac m1 
Javascript :: remove required attribute jquery mvc 
Javascript :: wordpress disable jquery migrate 
Javascript :: express get remote ip 
Javascript :: force delete in sequelize 
Javascript :: tinymce event on change 
Javascript :: react scroll 
Javascript :: React count up on scroll 
Javascript :: get element by id like javascript 
Javascript :: is javascript good 
ADD CONTENT
Topic
Content
Source link
Name
8+4 =