1.0.2 • Published 7 years ago

react-timer-component v1.0.2

Weekly downloads
15
License
MIT
Repository
github
Last release
7 years ago

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

react-timer-component example (all-in-one) 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

propertypropTyperequireddefaultdescription
afterCompletefuncnonullafterComplete()
afterTickfuncnonullafterTick(remaining: number)
childrennodenonullpresentational components
intervalnumberno1000milliseconds
remainingnumberyes-milliseconds
stylecss objectno{}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