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