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

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

https://noriaki.github.io/react-timer-component/
(with storybooks/storybook)

• 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
  表示更新毎とタイマー終了時にコールバックを指定可能

• node 6.x || >= 7.x
• react >= 15.x
• prop-types >= 15.x

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

or

yarn add react prop-types
yarn add react-timer-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 remaining={20000}>
  <Countdown/>
</Timer>

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

MIT

noriaki