react-compound-timerv2-ocuco
v2.0.0
Published
Timer compound react component
Downloads
33
Maintainers
Readme
react-compound-timerv2-ocuco
About
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!
Forward Count
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.
<Timer>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</Timer>
Backward Count
The same simple timer, but counting backward.
<Timer initialTime={55000} direction="backward">
{() => (
<React.Fragment>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</React.Fragment>
)}
</Timer>
Controls
Get action functions from props and use them to control your timer.
<Timer initialTime={55000}>
{({ start, resume, pause, stop, reset, timerState }) => (
<React.Fragment>
<div>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</div>
<div>{timerState}</div>
<br />
<div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={resume}>Resume</button>
<button onClick={stop}>Stop</button>
<button onClick={reset}>Reset</button>
</div>
</React.Fragment>
)}
</Timer>
No autoplay
You can just render a timer, and then start it only by using action function 'start' from props.
<Timer initialTime={55000} startImmediately={false}>
{({ start, resume, pause, stop, reset, timerState }) => (
<React.Fragment>
<div>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</div>
<div>{timerState}</div>
<br />
<div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={resume}>Resume</button>
<button onClick={stop}>Stop</button>
<button onClick={reset}>Reset</button>
</div>
</React.Fragment>
)}
</Timer>
With hooks
Write your own hooks on timer actions.
<Timer
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 }) => (
<React.Fragment>
<div>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</div>
<div>{timerState}</div>
<br />
<div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={resume}>Resume</button>
<button onClick={stop}>Stop</button>
<button onClick={reset}>Reset</button>
</div>
</React.Fragment>
)}
</Timer>
Last Unit Property
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.
<Timer initialTime={60000 * 60 * 48 + 5000} lastUnit="h" direction="backward">
{() => (
<React.Fragment>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</React.Fragment>
)}
</Timer>
With checkpoints
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.
<Timer
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"),
},
]}
>
{() => (
<React.Fragment>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</React.Fragment>
)}
</Timer>
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.
Countdown example with milliseconds
import { View, Text } from "react-native";
import Timer from "react-compound-timer";
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Timer
initialTime={60 * 1000}
direction="backward"
timeToUpdate={10}
checkpoints={[
{
time: 0,
callback: () => alert("countdown finished"),
},
]}
>
<Text style={{ fontFamily: "Helvetica Neue" }}>
<Text style={{ fontSize: 32 }}>
<Timer.Seconds />
</Text>
<Text style={{ fontSize: 12 }}>
<Timer.Milliseconds />
</Text>
</Text>
</Timer>
</View>;