# @noriaki/react-timer-component

> A timer component for React that passing remaining milliseconds by context using

Latest version **0.0.3** (published 2017-06-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @noriaki/react-timer-component
pnpm add @noriaki/react-timer-component
yarn add @noriaki/react-timer-component
bun add @noriaki/react-timer-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2017-06-12 |
| First published | 2017-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 6.x \|\| >= 7.x |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Noriaki Uchiyama |
| Maintainers | noriaki |
| Keywords | react, react-component, timer, interval, countdown |

## Links

- npm: https://www.npmjs.com/package/@noriaki/react-timer-component
- Repository: https://github.com/noriaki/react-timer-component
- Homepage: https://github.com/noriaki/react-timer-component#readme
- Issues: https://github.com/noriaki/react-timer-component/issues
- npm.io page: https://npm.io/package/@noriaki/react-timer-component

## Dependencies (1)

- [react-style-proptype](https://npm.io/package/react-style-proptype.md) ^3.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2017-06-12
- 0.0.2 — 2017-06-08
- 0.0.1 — 2017-06-07

## README

# react-timer-component

> A timer component for React that passing `remaining` milliseconds by `context` using<br />
> `コンテキスト`によって残り時間`remaining`（ミリ秒）を渡すタイプのカウントダウン・タイマーReactコンポーネント

[![NPM version](https://img.shields.io/npm/v/react-timer-component.svg?style=flat-square)](https://badge.fury.io/js/react-timer-component)
[![Build Status](https://img.shields.io/travis/noriaki/react-timer-component.svg?style=flat-square)](https://travis-ci.org/noriaki/react-timer-component)
[![Dependency Status](https://img.shields.io/david/noriaki/react-timer-component.svg?style=flat-square)](https://david-dm.org/noriaki/react-timer-component)
[![PeerDependency Status](https://img.shields.io/david/peer/noriaki/react-timer-component.svg?style=flat-square)](https://david-dm.org/noriaki/react-timer-component)

## Description

Functional React component, pass `context.remaining` to any child presentational component.

## Demo

![react-timer-component example (all-in-one)](https://raw.githubusercontent.com/noriaki/react-timer-component/gh-pages/images/examples-screencast.gif)<br />
https://noriaki.github.io/react-timer-component/<br />
(with [storybooks/storybook](https://github.com/storybooks/storybook/))

## Features

- Any presentational components can be used by child component<br />
  子コンポーネントとして任意の表示用コンポーネントが使用可能
- Timer settings, `remaining` and `interval` can be specified by props<br />
  残り時間と表示間隔をpropsで指定可能
- Callbacks, `afterTick` and `afterComplete` can be specified by props<br />
  表示更新毎とタイマー終了時にコールバックを指定可能

## 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 (
    <p>{`${seconds}.${milliseconds}`}</p>
  );
};

Countdown.contextTypes = {
  remaining: PropTypes.number,
};
```

### Timer component

```js
<Timer remaining={20000}>
  <Countdown/>
</Timer>
```

### Props of `<Timer>` 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 &lt;div&gt; |

## 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)

---
_Source: https://npm.io/package/@noriaki/react-timer-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._