1.1.0 • Published 5 years ago
@xendora/react-timer v1.1.0
react-timer
A minimalistic yet customizable timer component!
Installation
For NPM
npm install @xendora/react-timerFor Yarn
yarn add @xendora/react-timerUsage
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