@noriaki/react-timer-component

0.0.3 • Public • Published

react-timer-component

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

NPM version Build Status Dependency Status PeerDependency Status

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

Package Sidebar

Install

npm i @noriaki/react-timer-component

Weekly Downloads

1

Version

0.0.3

License

MIT

Last publish

Collaborators

  • noriaki