Countdown timer in React

Question

I have seen lots of countdown timers in JavaScript and wanted to get one working in React   I have borrowed this function I found online   secondsToTime secs       let hours   Math floor secs    60   60         let divisor for minutes   secs    60   60       let minutes   Math floor divisor for minutes   60        let divisor for seconds   divisor for minutes   60      let seconds   Math ceil divisor for seconds        let obj              h   hours           m   minutes           s   seconds            return obj         And then I have written this code myself    initiateTimer        gt        let timeLeftVar   this secondsToTime 60       this setState   timeLeft  timeLeftVar            startTimer        gt        let interval   setInterval this timer  1000       this setState   interval  interval             timer        gt        if  this state timeLeft  gt 0         this setState   timeLeft  this state timeLeft -1               else         clearInterval this state interval           this postToSlack                 Currently onclick it will set the time on screen to  Time Remaining  1 m   0 s But it does not reduce it to Time Remaining  0 m   59 s and then Time Remaining  0 m   58 s etc etc  I think I need to call the function again with a different parameter  how can I go about doing this    Edit  I forgot to say  I would like the functionality so that I can use seconds to minutes  amp  seconds

User · Answer

x000D   x000D  class Example extends React Component   x000D    constructor     x000D      super    x000D      this state     time      seconds  5    x000D      this timer   0  x000D      this startTimer   this startTimer bind this   x000D      this countDown   this countDown bind this   x000D      x000D   x000D    secondsToTime secs   x000D      let hours   Math floor secs    60   60    x000D   x000D      let divisor for minutes   secs    60   60   x000D      let minutes   Math floor divisor for minutes   60   x000D   x000D      let divisor for seconds   divisor for minutes   60  x000D      let seconds   Math ceil divisor for seconds   x000D   x000D      let obj     x000D         h   hours  x000D         m   minutes  x000D         s   seconds x000D         x000D      return obj  x000D      x000D   x000D    componentDidMount     x000D      let timeLeftVar   this secondsToTime this state seconds   x000D      this setState   time  timeLeftVar     x000D      x000D   x000D    startTimer     x000D      if  this timer    0  amp  amp  this state seconds  gt  0    x000D        this timer   setInterval this countDown  1000   x000D        x000D      x000D   x000D    countDown     x000D         Remove one second  set state so a re-render happens  x000D      let seconds   this state seconds - 1  x000D      this setState   x000D        time  this secondsToTime seconds   x000D        seconds  seconds  x000D          x000D       x000D         Check if we re at zero  x000D      if  seconds    0     x000D        clearInterval this timer   x000D        x000D      x000D   x000D    render     x000D      return  x000D         lt div gt  x000D           lt button onClick  this startTimer  gt Start lt  button gt  x000D          m   this state time m  s   this state time s  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  lt Example  gt   document getElementById  View     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  View  gt  lt  div gt  x000D   x000D   x000D

User · Answer

The problem is in your  this  value  Timer function cannot access the  state  prop because run in a different context  I suggest you to do something like this       startTimer        gt      let interval   setInterval this timer bind this   1000     this setState   interval          As you can see I ve added a  bind  method to your timer function  This allows the timer  when called  to access the same  this  of your react component  This is the primary problem improvement when working with javascript in general    Another option is to use another arrow function   startTimer        gt      let interval   setInterval      gt  this timer    1000     this setState   interval

User · Answer

You have to setState every second with the seconds remaining  every time the interval is called   Here s an example    x000D   x000D  class Example extends React Component   x000D    constructor     x000D      super    x000D      this state     time      seconds  5    x000D      this timer   0  x000D      this startTimer   this startTimer bind this   x000D      this countDown   this countDown bind this   x000D      x000D   x000D    secondsToTime secs   x000D      let hours   Math floor secs    60   60    x000D   x000D      let divisor for minutes   secs    60   60   x000D      let minutes   Math floor divisor for minutes   60   x000D   x000D      let divisor for seconds   divisor for minutes   60  x000D      let seconds   Math ceil divisor for seconds   x000D   x000D      let obj     x000D         h   hours  x000D         m   minutes  x000D         s   seconds x000D         x000D      return obj  x000D      x000D   x000D    componentDidMount     x000D      let timeLeftVar   this secondsToTime this state seconds   x000D      this setState   time  timeLeftVar     x000D      x000D   x000D    startTimer     x000D      if  this timer    0  amp  amp  this state seconds  gt  0    x000D        this timer   setInterval this countDown  1000   x000D        x000D      x000D   x000D    countDown     x000D         Remove one second  set state so a re-render happens  x000D      let seconds   this state seconds - 1  x000D      this setState   x000D        time  this secondsToTime seconds   x000D        seconds  seconds  x000D          x000D       x000D         Check if we re at zero  x000D      if  seconds    0     x000D        clearInterval this timer   x000D        x000D      x000D   x000D    render     x000D      return  x000D         lt div gt  x000D           lt button onClick  this startTimer  gt Start lt  button gt  x000D          m   this state time m  s   this state time s  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  lt Example  gt   document getElementById  View     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  View  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Basic idea showing counting down using Date now   instead of subtracting one which will drift over time   x000D   x000D  class Example extends React Component     constructor         super        this state           time            hours  0          minutes  0          seconds  0          milliseconds  0                 duration  2   60   1000        timer  null            this startTimer   this start bind this          msToTime duration        let milliseconds   parseInt  duration   1000        let seconds   Math floor  duration   1000    60       let minutes   Math floor  duration    1000   60     60       let hours   Math floor  duration    1000   60   60     24        hours   hours toString   padStart 2   0        minutes   minutes toString   padStart 2   0        seconds   seconds toString   padStart 2   0        milliseconds   milliseconds toString   padStart 3   0         return         hours        minutes        seconds        milliseconds               componentDidMount         start         if   this state timer          this state startTime   Date now          this timer   window setInterval      gt  this run    10                run         const diff   Date now   - this state startTime              If you want to count up        this setState      gt             time  this msToTime diff                          count down     let remaining   this state duration - diff      if  remaining  lt  0          remaining   0            this setState      gt           time  this msToTime remaining               if  remaining     0          window clearTimeout this timer         this timer   null               render         return    lt        div  gt         lt        button onClick             this startTimer          gt  Start  lt   button gt            this state time hours                    this state time minutes                    this state time seconds                    this state time milliseconds                 lt         div gt                ReactDOM render   lt  Example    gt    document getElementById  View     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt   lt div id  View  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here is a solution using hooks  Timer component  I m replicating same logic above with hooks   import React from  react  import   useState  useEffect   from  react    const Timer    props any    gt        const  initialMinute   0 initialSeconds   0    props      const   minutes  setMinutes     useState initialMinute       const  seconds  setSeconds      useState initialSeconds       useEffect     gt       let myInterval   setInterval      gt                if  seconds  gt  0                    setSeconds seconds - 1                             if  seconds     0                    if  minutes     0                        clearInterval myInterval                    else                       setMinutes minutes - 1                       setSeconds 59                                               1000          return     gt                clearInterval myInterval                             return            lt div gt            minutes     0  amp  amp  seconds     0               null                lt h1 gt   minutes   seconds  lt  10     0  seconds     seconds  lt  h1 gt                      lt  div gt           export default Timer

User · Answer

The one downside with setInterval is that it can slow down the main thread  You can do a countdown timer using requestAnimationFrame instead to prevent this  For example  this is my generic countdown timer component   class Timer extends Component     constructor props        super props         here  getTimeRemaining is a helper function that returns an         object with   total  seconds  minutes  hours  days       this state     timeLeft  getTimeRemaining props expiresAt              Wait until the component has mounted to start the animation frame   componentDidMount         this start             Clean up by cancelling any animation frame previously scheduled   componentWillUnmount         this stop          start        gt        this frameId   requestAnimationFrame this tick         tick        gt        const timeLeft   getTimeRemaining this props expiresAt      if  timeLeft total  lt   0          this stop               any other actions to do on expiration       else         this setState            timeLeft                 gt  this frameId   requestAnimationFrame this tick                       stop        gt        cancelAnimationFrame this frameId         render

User · Answer

Countdown of user input Interface Screenshot  import React    Component   from  react   import    App css    class App extends Component     constructor         super        this state           hours  0        minutes  0        seconds 0           this hoursInput   React createRef        this minutesInput  React createRef        this secondsInput   React createRef           inputHandler    e    gt        this setState   e target name   e target value           convertToSeconds     hours  minutes seconds    gt        return seconds   minutes   60   hours   60   60         startTimer        gt        this timer   setInterval this countDown  1000          countDown        gt        const    hours  minutes  seconds     this state      let c seconds   this convertToSeconds hours  minutes  seconds        if c seconds              seconds change       seconds   this setState  seconds  seconds-1     this setState  seconds  59              minutes change       if c seconds   60     0  amp  amp  minutes            this setState  minutes  minutes -1                      when only hours entered       if  minutes  amp  amp  hours            this setState  minutes  59                      hours change       if c seconds   3600     0  amp  amp  hours            this setState  hours  hours-1                   else         clearInterval this timer                 stopTimer        gt        clearInterval this timer          resetTimer        gt        this setState         hours  0        minutes  0        seconds  0             this hoursInput current value   0      this minutesInput current value   0      this secondsInput current value   0          render         const   hours  minutes  seconds     this state       return          lt div className  quot App quot  gt            lt h1 className  quot title quot  gt     React Countdown     lt  h1 gt            lt div className  quot inputGroup quot  gt               lt h3 gt Hrs lt  h3 gt               lt input ref  this hoursInput  type  quot number quot  placeholder  0   name  quot hours quot   onChange  this inputHandler    gt               lt h3 gt Min lt  h3 gt               lt input  ref  this minutesInput  type  quot number quot   placeholder  0    name  quot minutes quot   onChange  this inputHandler    gt               lt h3 gt Sec lt  h3 gt               lt input   ref  this secondsInput  type  quot number quot   placeholder  0   name  quot seconds quot   onChange  this inputHandler    gt            lt  div gt            lt div gt               lt button onClick  this startTimer  className  quot start quot  gt start lt  button gt               lt button onClick  this stopTimer   className  quot stop quot  gt stop lt  button gt               lt button onClick  this resetTimer   className  quot reset quot  gt reset lt  button gt            lt  div gt            lt h1 gt  Timer  hours    minutes     seconds   lt  h1 gt         lt  div gt                 export default App

[javascript] Countdown timer in React

Examples related to javascript

Examples related to reactjs

Examples related to countdown