@xendora/react-timer
npm i @xendora/react-timer

@xendora/react-timer

A minimalistic yet customizable timer component!

by xendora

1.1.0 (see all)License:MITTypeScript:Not Found
npm i @xendora/react-timer
Readme

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

NameTypeDescription
childrenobject (required)Define your react component here
startnumber (required)A start value for the timer
endfunction (required)A function which determines the end for the timer
intervalnumberAn interval value for the timer. Default is 1 second
onTickfunction (required)A callback function where the next computed value is determined
onEndfunctionA callback function which executes when the timer stops executing

License

MIT © xendora

Downloads/wk

39

GitHub Stars

10

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

1

OPEN PRs

23
VersionTagPublished
1.1.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial