react-super-timer v1.0.0

react-super-timer

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

Install

npm install --save react-super-timer

or

yarn add react-super-timer

Usage

import React, { Component } from 'react'

import SuperTimer from 'react-super-timer'

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

momentDurationFormatSetup(moment);

class Example extends Component {
  render () {
    return (
      <SuperTimer
        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

SuperTimer

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

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

Props

Types

License

MIT © Yassine Doghri