react-compound-timerv2

$3

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!

See Working Examples

$3

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

days
hours
minutes
seconds
milliseconds

`

$3

The same simple timer, but counting backward.

`jsx

{() => (

days
hours
minutes
seconds
milliseconds

)}

`

$3

Get action functions from props and use them to control your timer.

`jsx

{({ start, resume, pause, stop, reset, timerState }) => (

days
hours
minutes
seconds
milliseconds

{timerState}

Start
Pause
Resume
Stop
Reset

)}

`

$3

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 }) => (

days
hours
minutes
seconds
milliseconds

{timerState}

Start
Pause
Resume
Stop
Reset

)}

`

$3

Write your own hooks on timer actions.

`jsx
initialTime={55000}
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 }) => (

days
hours
minutes
seconds
milliseconds

{timerState}

Start
Pause
Resume
Stop
Reset

)}

`

$3

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
60 48 + 5000} lastUnit="h" direction="backward">
{() => (

days
hours
minutes
seconds
milliseconds

)}

`

$3

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
initialTime={60000 60 48 + 5000}
direction="backward"
checkpoints={[
{
time: 60000 60 48,
callback: () => console.log("Checkpoint A"),
},
{
time: 60000 60 48 - 5000,
callback: () => console.log("Checkpoint B"),
},
]}
>
{() => (

days
hours
minutes
seconds
milliseconds

)}

`

React Native

Timer compound component also works for react-native applications. All you have to do is wrap the elements in a tag from react-native.

$3

`jsx
import { View, Text } from "react-native";
import Timer from "react-compound-timer";


initialTime={60 * 1000}
direction="backward"
timeToUpdate={10}
checkpoints={[
{
time: 0,
callback: () => alert("countdown finished"),
},
]}
>









;
``