Timer compound react component
This is a forked version of the original react-compound-timer compatible with React 17.
---
Timer compound component for react and react-native to make building timers less painfull.
It incapsulates all timer logic - you should only think about rendering!
Just render a simple timer and start counting forward from 0. Use compound components to render time units.
You can see all avaliable time units in this example.
``jsx`
The same simple timer, but counting backward.
`jsx`
{() => (
)}
Get action functions from props and use them to control your timer.
`jsx`
{({ start, resume, pause, stop, reset, timerState }) => (
{timerState}
)}
You can just render a timer, and then start it only by using action function 'start' from props.
`jsx`
{({ start, resume, pause, stop, reset, timerState }) => (
{timerState}
)}
Write your own hooks on timer actions.
`jsx`
startImmediately={false}
onStart={() => console.log("onStart hook")}
onResume={() => console.log("onResume hook")}
onPause={() => console.log("onPause hook")}
onStop={() => console.log("onStop hook")}
onReset={() => console.log("onReset hook")}
>
{({ start, resume, pause, stop, reset, timerState }) => (
{timerState}
)}
Control your last unit. For example, 1 minute 30 seconds can be 90 seconds, if you set lastUnit as 'seconds'.
It means that minutes, hours and days will not be computed.
`jsx`
{() => (
)}
If you need to call some functions on certain time - provide checkpoints property. It is an array of objects.
Each object contains time and callback, that will be fired, when timer intersects checkpoint's time.
`jsx`
direction="backward"
checkpoints={[
{
time: 60000 60 48,
callback: () => console.log("Checkpoint A"),
},
{
time: 60000 60 48 - 5000,
callback: () => console.log("Checkpoint B"),
},
]}
>
{() => (
)}
Timer compound component also works for react-native applications. All you have to do is wrap the elements in a
`jsx
import { View, Text } from "react-native";
import Timer from "react-compound-timer";
direction="backward"
timeToUpdate={10}
checkpoints={[
{
time: 0,
callback: () => alert("countdown finished"),
},
]}
>
``