Skip to content

Latest commit

 

History

History
73 lines (58 loc) · 2.16 KB

README.md

File metadata and controls

73 lines (58 loc) · 2.16 KB

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