React Timer Machine is a fully controllable and customizable timer component for react
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE docs(issue-templates): update issue templates Jun 9, 2018
example fix(timer-start): trigger forceUpdate after component mount Jan 16, 2019
src fix(timer-start): trigger forceUpdate after component mount Jan 16, 2019
.babelrc chore(structure): init library structure using create-react-library Jun 2, 2018
.commitlintrc.json chore(structure): init library structure using create-react-library Jun 2, 2018
.eslintrc.js fix(timer-start): trigger forceUpdate after component mount Jan 16, 2019
.gitignore ci(travis): automate npm and github pages deployment Jun 2, 2018
.lintstagedrc.json chore(structure): init library structure using create-react-library Jun 2, 2018
.travis.yml ci(travis): skip cleanup for when deploying to npm Jun 3, 2018
CHANGELOG.md chore(release): 1.0.2 Jan 16, 2019
CODE_OF_CONDUCT.md docs(contributing): add code of conduct file for contributors Jun 9, 2018
CONTRIBUTING.md docs(contribute): add contributing.md file Jun 9, 2018
LICENSE Initial commit Jun 2, 2018
README.md
package.json chore(release): 1.0.2 Jan 16, 2019
rollup.config.js chore(structure): init library structure using create-react-library Jun 2, 2018
yarn.lock fix(timer-start): trigger forceUpdate after component mount Jan 16, 2019

README.md

react-timer-machine

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

NPM JavaScript Style Guide Build Status Build Status Maintainability Test Coverage

Install

npm install --save react-timer-machine

or

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

Code and documentation copyright 2018, Yassine Doghri. Code released under the MIT License.