@noriaki/react-timer-component

react-timer-component

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

Description

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

Demo

https://noriaki.github.io/react-timer-component/
(with 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

npm install --save react prop-types
npm install --save react-timer-component

or

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.

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

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

Author

noriaki