Skip to content

xendora/react-timer

Repository files navigation

react-timer

A minimalistic yet customizable timer component!

Live demo

Travis (.org) branch GitHub Release Date npm NPM npm bundle size npm bundle size

Basic Timer with 100ms interval

Installation

For NPM

npm install @xendora/react-timer 

For Yarn

yarn add @xendora/react-timer 

Usage

import ReactTimer from "@xendora/react-timer"; // Incremental counter <ReactTimer interval={100} start={0} end={t => t === 100} onTick={t => t + 1} > {time => <span>{time}</span>} </ReactTimer> // Decremetal counter <ReactTimer interval={100} start={100} end={t => t === 0} onTick={t => t - 1} > {time => <span>{time}</span>} </ReactTimer> // Infinite counter <ReactTimer interval={100} start={0} end={t => false} onTick={t => t + 1} > {time => <span>{time}</span>} </ReactTimer>

Props

Name Type Description
children object (required) Define your react component here
start number (required) A start value for the timer
end function (required) A function which determines the end for the timer
interval number An interval value for the timer. Default is 1 second
onTick function (required) A callback function where the next computed value is determined
onEnd function A callback function which executes when the timer stops executing

License

MIT © xendora