Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-compound-timerv2
Advanced tools
Readme
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.
<Timer>
<Timer.Days /> days
<Timer.Hours /> hours
<Timer.Minutes /> minutes
<Timer.Seconds /> seconds
<Timer.Milliseconds /> milliseconds
</Timer>
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>
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>
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>
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>
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>
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>
Timer compound component also works for react-native applications. All you have to do is wrap the elements in a tag from react-native.
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>;
FAQs
Timer compound react component
The npm package react-compound-timerv2 receives a total of 61 weekly downloads. As such, react-compound-timerv2 popularity was classified as not popular.
We found that react-compound-timerv2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.