react-compound-timer

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
initialTime={55000}
direction="backward"
>
{() => (

days
hours
minutes
seconds
milliseconds

)}

`

$3

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

`jsx
initialTime={55000}
>
{({ 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
initialTime={55000}
startImmediately={false}
>
{({ 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
initialTime={60000 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'),
},
]}
>










``