https://github.com/noriaki/react-timer-component
A timer component for React that passing remaining milliseconds by context using
https://github.com/noriaki/react-timer-component
countdown interval react react-component timer
Last synced: 5 months ago
JSON representation
A timer component for React that passing remaining milliseconds by context using
- Host: GitHub
- URL: https://github.com/noriaki/react-timer-component
- Owner: noriaki
- License: mit
- Created: 2017-06-05T04:38:06.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-19T07:01:39.000Z (about 9 years ago)
- Last Synced: 2025-10-21T22:55:14.713Z (8 months ago)
- Topics: countdown, interval, react, react-component, timer
- Language: JavaScript
- Homepage:
- Size: 997 KB
- Stars: 11
- Watchers: 1
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-timer-component
> A timer component for React that passing `remaining` milliseconds by `context` using
> `コンテキスト`によって残り時間`remaining`（ミリ秒）を渡すタイプのカウントダウン・タイマーReactコンポーネント
[](https://badge.fury.io/js/react-timer-component)
[](https://travis-ci.org/noriaki/react-timer-component)
[](https://david-dm.org/noriaki/react-timer-component)
[](https://david-dm.org/noriaki/react-timer-component)
## Description
Functional React component, pass `context.remaining` to any child presentational component.
## Demo
https://noriaki.github.io/react-timer-component/
(with [storybooks/storybook](https://github.com/storybooks/storybook/))
## Features
- Any presentational components can be used by child component
子コンポーネントとして任意の表示用コンポーネントが使用可能
- Timer settings, `remaining` and `interval` can be specified by props
残り時間と表示間隔をpropsで指定可能
- Callbacks, `afterTick` and `afterComplete` can be specified by props
表示更新毎とタイマー終了時にコールバックを指定可能
## Requirements
- node `6.x || >= 7.x`
- react `>= 15.x`
- prop-types `>= 15.x`
## Install
```sh
npm install --save react prop-types
npm install --save react-timer-component
```
or
```sh
yarn add react prop-types
yarn add react-timer-component
```
## Usage
### Child presentational component
Child presentational component are passed `context.remaining`.
For that purpose, requiring `contextTypes` setting to component static property.
```js
const Countdown = (props, context) => {
const d = new Date(context.remaining);
const { seconds, milliseconds } = {
seconds: d.getUTCSeconds(),
milliseconds: d.getUTCMilliseconds(),
};
return (
{`${seconds}.${milliseconds}`}
);
};
Countdown.contextTypes = {
remaining: PropTypes.number,
};
```
### Timer component
```js
```
### Props of `` component
| property | propType | required | default | description |
| -------- |:--------:|:--------:|:-------:| ----------- |
| afterComplete | func | no | null | `afterComplete()` |
| afterTick | func | no | null | `afterTick(remaining: number)` |
| children | node | no | null | presentational components |
| interval | number | no | 1000 | milliseconds |
| remaining | number | yes | - | milliseconds |
| style | css object | no | {} | stype for container <div> |
## Contribution
1. Fork it ( http://github.com/noriaki/react-timer-component/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request
## Licence
[MIT](https://github.com/noriaki/react-timer-component/blob/master/LICENSE)
## Author
[noriaki](https://github.com/noriaki)