Skip to content

xendora/react-timer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Rajender Joshi
Nov 4, 2019
9866693 · Nov 4, 2019

History

73 Commits
Oct 20, 2019
Oct 31, 2019
Oct 30, 2019
Nov 2, 2019
Aug 28, 2019
Aug 28, 2019
Oct 6, 2019
Oct 6, 2019
Oct 6, 2019
Nov 3, 2019
Oct 8, 2019
Nov 4, 2019
Oct 6, 2019
Nov 4, 2019
Aug 28, 2019
Oct 20, 2019
Oct 31, 2019

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