Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/react-timer-wrapper
Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.
https://github.com/ryanhefner/react-timer-wrapper
countdown countdown-timer react react-component react-indicators react-timecode react-timer react-timer-wrapper timer
Last synced: 3 months ago
JSON representation
Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.
- Host: GitHub
- URL: https://github.com/ryanhefner/react-timer-wrapper
- Owner: ryanhefner
- License: mit
- Created: 2017-07-25T18:35:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-17T23:52:34.000Z (3 months ago)
- Last Synced: 2024-10-24T18:48:05.462Z (3 months ago)
- Topics: countdown, countdown-timer, react, react-component, react-indicators, react-timecode, react-timer, react-timer-wrapper, timer
- Language: JavaScript
- Homepage: https://ryanhefner.github.io/react-timer-wrapper/
- Size: 2.06 MB
- Stars: 17
- Watchers: 3
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⏳ react-timer-wrapper
Composable React Timer component that passes status props to children, in addition
to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track
time while active.
## Install
Via [npm](https://npmjs.com/package/react-timer-wrapper)
```sh
npm install --save react-timer-wrapper
```
Via [Yarn](https://yarn.fyi/react-timer-wrapper)
```sh
yarn add react-timer-wrapper
```
## How to use
The `Timer` can be used in a couple different ways. You could use it as a standalone
timer and setup callbacks to trigger things to happen in your project. Or, wrap
child components in `Timer` component, where those children will receive
props passed in by the `Timer`.
It can be used as a countdown timer, which will fire the `onFinish` event upon
completion. Or, you can use it to track the time that occurs while it’s active.
### Properties
* `active:Boolean` - Start/stop the timer. (Default: `false`)
* `component:String | Element` - Element or React component used to render/wrap the children. (Default: `div`)
* `duration:Number` - Enables countdown mode and is the number of milliseconds to count before firing `onFinish`. (Default: `10000`)
* `loop:Boolean` - Enable looping of the countdown timer. (Default: `false`)
* `time:Number` - Either used as a time offset for the duration when used as a countdown timer, or the initial time to start from when used for tracking time. (Default: `0`)
* `onFinish:Function` - Callback fired when the timer has finished. (Fired in countdown mode only)
* `onStart:Function` - Callback fired when the timer is started.
* `onStop:Function` - Callback fired when the timer is stopped.
* `onTimeUpdate:Function` - Callback fired when time updates.
### Examples
#### Standalone
```js
import Timer from 'react-timer-wrapper';
...
onTimerStart({duration, progress, time}) {
}
onTimerStop({duration, progress, time}) {
}
onTimerTimeUpdate({duration, progress, time}) {
}
onTimerFinish({duration, progress, time}) {
}
render() {
const {
timerActive,
} = this.state;
return (
);
}
...
```
#### With children
```js
import Timer from 'react-timer-wrapper';
import CircleIndicator from 'react-indicators';
...
render() {
const {
timerShouldRun,
} = this.state;
return (
);
}
...
```
### Children
The `Timer` allows you to easily compose components that provide a visual
status of the timer. Each children receives the following props that you can use
to communicate the status of the timer.
* `duration:Number` - Duration of the countdown timer. _(Available for countdown timers only, `null` passed when used for time tracking)_
* `progress:Number` - Current percentage of timer complete. _(Available for countdown timers only, `null` passed when used for time tracking)_
* `time:Number` - Current time on the timer in milliseconds.
## Pairs well with...
* [react-indicators](https://github.com/ryanhefner/react-indicators)
* [react-timecode](https://github.com/ryanhefner/react-timecode)
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)