![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
react-compound-timer
Advanced tools
Readme
Timer compound component for react 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>
FAQs
React hooks for timers, countdowns, and stopwatches.
The npm package react-compound-timer receives a total of 8,154 weekly downloads. As such, react-compound-timer popularity was classified as popular.
We found that react-compound-timer demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.