Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
react-compound-timer
Advanced tools
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 12,226 weekly downloads. As such, react-compound-timer popularity was classified as popular.
We found that react-compound-timer 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
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.