Skip to content

Commit f045fec

Browse files
ryanhefnerryanhefner
committed
Initial commit
1 parent 7f329ab commit f045fec

11 files changed

+3496
-0
lines changed

‎.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
es
3+
node_modules
4+
umd
5+
/*.js
6+
npm-debug.log
7+
yarn-error.log
8+
*.sublime-project
9+
*.sublime-workspace
10+
!rollup.config.js

‎.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
tools
2+
*.sublime-project
3+
*.sublime-workspace

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Ryan Hefner <[email protected]> (https://www.ryanhefner.com)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# react-timer-wrapper
2+
3+
Composable React Timer component that passes status props to children, in addition
4+
to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track
5+
time while active.
6+
7+
## Install
8+
9+
Via [npm](https://npmjs.com/package/react-timer-wrapper):
10+
```
11+
npm install --save react-timer-wrapper
12+
```
13+
14+
Via [Yarn](https://yarn.fyi/react-timer-wrapper):
15+
```
16+
yarn add react-timer-wrapper
17+
```
18+
19+
## How to use
20+
21+
The `Timer` can be used in a couple different ways. You could use it as a standalone
22+
timer and setup callbacks to trigger things to happen in your project. Or, wrap
23+
child components in `Timer` component, where those children will receive
24+
props passed in by the `Timer`.
25+
26+
It can be used as a countdown timer, which will fire the `onFinish` event upon
27+
completion. Or, you can use it to track the time that occurs while it’s active.
28+
29+
### Properties
30+
31+
* `active:Boolean` - Start/stop the timer. (Default: `false`)
32+
* `duration:Number` - Enables countdown mode and is the number of milliseconds to count before firing `onFinish`. (Default: `10000`)
33+
* `loop:Boolean` - Enable looping of the countdown timer. (Default: `false`)
34+
* `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`)
35+
* `onFinish:Function` - Callback fired when the timer has finished. (Fired in countdown mode only)
36+
* `onStart:Function` - Callback fired when the timer is started.
37+
* `onStop:Function` - Callback fired when the timer is stopped.
38+
* `onTimeUpdate:Function` - Callback fired when time updates.
39+
40+
### Examples
41+
42+
#### Standalone
43+
44+
```
45+
import Timer from 'react-timer-wrapper';
46+
47+
...
48+
49+
onTimerStart({duration, progress, time}) {
50+
51+
}
52+
53+
onTimerStop({duration, progress, time}) {
54+
55+
}
56+
57+
onTimerTimeUpdate({duration, progress, time}) {
58+
59+
}
60+
61+
onTimerFinish({duration, progress, time}) {
62+
63+
}
64+
65+
render() {
66+
const {
67+
timerActive,
68+
} = this.state;
69+
70+
return (
71+
<Timer
72+
active={timerActive}
73+
onFinish={this.onTimerFinish}
74+
onStart={this.onTimerStart}
75+
onStop={this.onTimerStop}
76+
onTimeUpdate={this.onTimerTimeUpdate}
77+
/>
78+
);
79+
}
80+
81+
...
82+
83+
```
84+
85+
#### With children
86+
87+
```
88+
import Timer from 'react-timer-wrapper';
89+
import CircleIndicator from 'react-indicators';
90+
91+
...
92+
93+
render() {
94+
const {
95+
timerShouldRun,
96+
} = this.state;
97+
98+
return (
99+
<Timer active={timerShouldRun}>
100+
<CircleIndicator />
101+
</Timer>
102+
);
103+
}
104+
105+
...
106+
107+
```
108+
109+
### Children
110+
111+
The `Timer` allows you to easily compose components that provide a visual
112+
status of the timer. Each children receives the following props that you can use
113+
to communicate the status of the timer.
114+
115+
* `duration:Number` - Duration of the countdown timer. _(Available for countdown timers only, `null` passed when used for time tracking)_
116+
* `progress:Number` - Current percentage of timer complete. _(Available for countdown timers only, `null` passed when used for time tracking)_
117+
* `time:Number` - Current time on the timer in milliseconds.
118+
119+
## Pairs well with...
120+
121+
* [react-indicators](https://github.com/ryanhefner/react-indicators)
122+
* [react-timecode](https://github.com/ryanhefner/react-timecode)
123+
124+
## License
125+
126+
[MIT](LICENSE)

‎package.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "react-timer-wrapper",
3+
"version": "0.1.0",
4+
"license": "MIT",
5+
"description": "Composable React Timer component that passes its status to its children.",
6+
"repository": "ryanhefner/react-timer-wrapper",
7+
"author": "Ryan Hefner <[email protected]> (https://www.ryanhefner.com)",
8+
"files": [
9+
"index.js",
10+
"es",
11+
"umd"
12+
],
13+
"directories": {
14+
"lib": "/src"
15+
},
16+
"main": "index.js",
17+
"module": "es/index.js",
18+
"jsnext:main": "src/index.js",
19+
"scripts": {
20+
"clean": "rm -f index.js && rm -fr es && rm -fr umd",
21+
"prebuild": "npm run clean",
22+
"build": "node ./tools/build.js",
23+
"watch": "babel ./src -d . --ignore __tests__ --watch",
24+
"prepare": "npm run build",
25+
"prepublishOnly": "node ./tools/build.js",
26+
"push-release": "git push origin master && git push --tags",
27+
"test": "echo \"Error: no test specified\" && exit 1"
28+
},
29+
"peerDependencies": {
30+
"react": ">=15"
31+
},
32+
"dependencies": {
33+
"clean-react-props": "^0.1.0",
34+
"prop-types": "^15.5.10"
35+
},
36+
"devDependencies": {
37+
"babel-cli": "^6.24.1",
38+
"babel-plugin-dev-expression": "^0.2.1",
39+
"babel-plugin-external-helpers": "^6.22.0",
40+
"babel-plugin-transform-react-remove-prop-types": "^0.4.6",
41+
"babel-preset-latest": "^6.24.1",
42+
"babel-preset-react": "^6.24.1",
43+
"gzip-size": "^3.0.0",
44+
"jest": "^20.0.4",
45+
"pretty-bytes": "^4.0.2",
46+
"react": "^15.6.1",
47+
"rimraf": "^2.6.1",
48+
"rollup": "^0.45.2",
49+
"rollup-plugin-babel": "^2.7.1",
50+
"rollup-plugin-commonjs": "^8.0.2",
51+
"rollup-plugin-json": "^2.3.0",
52+
"rollup-plugin-node-resolve": "^3.0.0",
53+
"rollup-plugin-uglify": "^2.0.1",
54+
"rollup-watch": "^4.3.1"
55+
}
56+
}

‎rollup.config.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import babel from 'rollup-plugin-babel';
2+
import commonjs from 'rollup-plugin-commonjs';
3+
import json from 'rollup-plugin-json';
4+
import resolve from 'rollup-plugin-node-resolve';
5+
import uglify from 'rollup-plugin-uglify';
6+
import pkg from './package.json';
7+
8+
const config = {
9+
entry: 'src/index.js',
10+
moduleName: 'react-timer-wrapper',
11+
exports: 'named',
12+
plugins: [
13+
babel({
14+
exclude: 'node_modules/**',
15+
}),
16+
resolve(),
17+
commonjs({
18+
include: /node_modules/,
19+
}),
20+
json(),
21+
],
22+
external: [
23+
'react',
24+
],
25+
globals: {
26+
'react': 'React',
27+
},
28+
dest: './index.js',
29+
banner: `/*! ${pkg.name} v${pkg.version} | (c) ${new Date().getFullYear()} Ryan Hefner | ${pkg.license} License | https://github.com/${pkg.repository} !*/`,
30+
footer: '/* follow me on Twitter! @ryanhefner */',
31+
};
32+
33+
if (process.env.NODE_ENV === 'production') {
34+
config.plugins.push(uglify());
35+
}
36+
37+
export default config;

‎src/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": [ "../tools/babel-preset" ]
3+
}

0 commit comments

Comments
 (0)