File tree 1 file changed +38
-2
lines changed
1 file changed +38
-2
lines changed Original file line number Diff line number Diff line change 3
3
4
4
[ Live demo] ( https://xendora.github.io/react-timer/examples )
5
5
6
- [ ![ Commitizen friendly] ( https://img.shields.io/badge/commitizen-friendly-brightgreen.svg )] ( http://commitizen.github.io/cz-cli/ )
6
+ ![ Travis (.org) branch] ( https://img.shields.io/travis/xendora/react-timer/master?style=for-the-badge ) ![ GitHub Release Date] ( https://img.shields.io/github/release-date/xendora/react-timer?style=for-the-badge ) ![ npm] ( https://img.shields.io/npm/v/@xendora/react-timer?style=for-the-badge ) ![ NPM] ( https://img.shields.io/npm/l/@xendora/react-timer?style=for-the-badge )
7
+ ![ npm bundle size] ( https://img.shields.io/bundlephobia/min/@xendora/react-timer?style=for-the-badge ) ![ npm bundle size] ( https://img.shields.io/bundlephobia/minzip/@xendora/react-timer?style=for-the-badge )
7
8
8
9
![ Basic Timer with 100ms interval] ( docs/images/incremental-counter.gif " Basic Timer with 100ms interval ")
9
10
@@ -20,6 +21,41 @@ npm install @xendora/react-timer
20
21
yarn add @xendora/react-timer
21
22
```
22
23
24
+ ### Usage
25
+ ``` js
26
+ import ReactTimer from " @xendora/react-timer" ;
27
+
28
+ // Incremental counter
29
+ < ReactTimer
30
+ interval= {100 }
31
+ start= {0 }
32
+ end= {t => t === 100 }
33
+ onTick= {t => t + 1 }
34
+ >
35
+ {time => < span> {time}< / span> }
36
+ < / ReactTimer>
37
+
38
+ // Decremetal counter
39
+ < ReactTimer
40
+ interval= {100 }
41
+ start= {100 }
42
+ end= {t => t === 0 }
43
+ onTick= {t => t - 1 }
44
+ >
45
+ {time => < span> {time}< / span> }
46
+ < / ReactTimer>
47
+
48
+ // Infinite counter
49
+ < ReactTimer
50
+ interval= {100 }
51
+ start= {0 }
52
+ end= {t => false }
53
+ onTick= {t => t + 1 }
54
+ >
55
+ {time => < span> {time}< / span> }
56
+ < / ReactTimer>
57
+ ```
58
+
23
59
## Props
24
60
| Name | Type | Description |
25
61
| ------------- | ------------- | ------------- |
@@ -33,4 +69,4 @@ yarn add @xendora/react-timer
33
69
34
70
## License
35
71
36
- MIT © [ xendora] ( https://github.com/xendora )
72
+ MIT © [ xendora] ( https://github.com/xendora )
You can’t perform that action at this time.
0 commit comments