React-timer-machine NPM

react-timer-machine

React Timer Machine is a fully controllable and customizable timer component for react

Install

npm install --save react-timer-machine

yarn add react-timer-machine

Usage

import React, { Component } from 'react'

import TimerMachine from 'react-timer-machine'

import moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";

momentDurationFormatSetup(moment);

class Example extends Component {
  render () {
    return (
      <TimerMachine
        timeStart={10 * 1000} // start at 10 seconds
        timeEnd={20 * 1000} // end at 20 seconds
        started={true}
        paused={false}
        countdown={false} // use as stopwatch
        interval={1000} // tick every 1 second
        formatTimer={(time, ms) =>
          moment.duration(ms, "milliseconds").format("h:mm:ss")
        }
        onStart={time =>
          console.info(`Timer started: ${JSON.stringify(time)}`)
        }
        onStop={time =>
          console.info(`Timer stopped: ${JSON.stringify(time)}`)
        }
        onTick={time =>
          console.info(`Timer ticked: ${JSON.stringify(time)}`)
        }
        onPause={time =>
          console.info(`Timer paused: ${JSON.stringify(time)}`)
        }
        onResume={time =>
          console.info(`Timer resumed: ${JSON.stringify(time)}`)
        }
        onComplete={time =>
          console.info(`Timer completed: ${JSON.stringify(time)}`)
        }
    />
    )
  }
}

User guide

TimerMachine

Renders a React Fragment to be fully customized. You can easily style the timer states thanks to the provided function callbacks.

By default, TimerMachine displays the time formatted as: hh:mm:ss.SSS. The format can be changed using the formatTimer property. See usage example above.

Props

Name	Type	Default	Description
timeStart `required`	`number`	-	The initial time on which the timer is set (in ms)
timeEnd	`number`	`0`	The time on which the timer will complete (in ms)
countdown	`boolean`	`false`	When `true`, sets the timer to countdown instead of counting up
interval	`number`	`1000`	The time between each ticks (in ms)
started	`boolean`	`false`	Starts the timer when set to `true`, stops it when set to `false`
paused	`boolean`	`false`	Pauses the timer when set to `true`, resumes it when set to `false`
formatTimer	`function`	`(timer: Timer, ms: number) => 'hh:mm:ss.SSS'`	Function to format the timer before it renders. You can use moment-duration as shown above or write your own
onStart	`function`	`(timer: Timer) => void`	Callback function called on timer start
onTick	`function`	`(timer: Timer) => void`	Callback function called on each timer tick
onPause	`function`	`(timer: Timer) => void`	Callback function called on timer pause
onResume	`function`	`(timer: Timer) => void`	Callback function called when timer resumes
onStop	`function`	`(timer: Timer) => void`	Callback function called on timer stop
onComplete	`function`	`(timer: Timer) => void`	Callback function called on timer complete

Types

Name	Example values
Timer `object`	`{ h: 1, m: 30, s: 30, ms: 0 }`

Versioning

react-timer-machine is maintained under the Semantic Versioning guidelines.

Contributing

Love react-timer-machine and would like to help? Check out the contribution guidelines for this project, everything should be there!

Contributors

Yassine Doghri (creator)

Copyright and licence

react react-component component super-timer timer-machine time-machine timer time countdown countup stopwatch counter game-timer

@everything-registry/sub-chunk-2618 @infinitebrahmanuniverse/nolb-react-ti

1.0.2

5 years ago

1.0.1

6 years ago

1.0.0

6 years ago