A minimalistic yet customizable timer component!
npm install @xendora/react-timer
yarn add @xendora/react-timer
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>
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 |
MIT © xendora