React-digital-timer

Functionality	Control by buttons / keyboard
set up time	type in count down in the timer frame
start	Play button / press Enter
pause	Pause button / press Enter
reset	Reset button / ctrl/command + Enter

Installation

Install via NPM

npm i react-digital-timer

Import

import { Timer } from 'react-digital-timer';

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { Timer } from '../dist';
import './App.css';

const INIT_TIME = {
    hour: 0,
    minute: 0,
    second: 624
}

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <p className="App-message">Digital Timer</p>
                <Timer
                    countDownTime={INIT_TIME}
                    onComplete={() => console.log('time\'s up')}
                />
            </header>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

Config Params

Field	Type	Description	Example
countDownTime	object	initial timer (after reset, the timer will also start with this initial time period)	{ hour: 0, minute: 20, second: 0 } // 20 minutes
showTimeUpMessage	boolean	to enable browser notification when timer count down finished	true
disableUpdateByKeyboard	boolean	to disable controling timer by keyboard. Enable this config to run a fixed time count down	true
disableControlPanel	boolean	to disable controling timer by buttons (control buttons will be hided)	true
digitClassName	string	to customize timer styles by your own CSS classname	large-digit (you can find this in the example css file)
iconClassName	string	to customize control button styles by your own CSS classname	large-btn (you can find this in the example css file)
onComplete	function	callback function fires when timer count down finished	() => console.log('time's up')
onTick	function	callback function fires during every second's count down	(secondsLeft: number) => console.log(secondsLeft)

Credits

Icons downloaded from icons8.com

License

MIT