https://github.com/troch/react-timer-hoc
A React timer higher-order component
https://github.com/troch/react-timer-hoc
Last synced: over 1 year ago
JSON representation
A React timer higher-order component
- Host: GitHub
- URL: https://github.com/troch/react-timer-hoc
- Owner: troch
- License: mit
- Created: 2015-11-27T22:23:59.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-26T19:06:14.000Z (almost 9 years ago)
- Last Synced: 2024-09-21T09:14:57.215Z (almost 2 years ago)
- Language: JavaScript
- Size: 76.2 KB
- Stars: 39
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-timer-hoc)
[](https://travis-ci.org/troch/react-timer-hoc)
# React timer component (higher-order)
> A React higher-order timer component
Keep your components simple, testable and composable by using higher-order components.
This higher-order timer component will re-render your component at the desire rate (in milliseconds).
This higher-order component takes care of when to call render on your component, so your component has only to care about the rendering logic.
> A higher-order component is just a function that takes an existing component and returns another component that wraps it.
Read about higher-order components here (applies to deku as well): __[Mixins Are Dead. Long Live Composition](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.c8wftb16t)__.
__Demo__: http://jsbin.com/nalixa/edit?html,js,output
### Applications
- Countdowns (time remaining)
- Timers (time elapsed)
- Forcing regular updates / refresh of time-based contents
### Features
- Stop and resume a timer
- Change its delay on the fly
- Synchronize with a timestamp (local or server clock)
### Installation
```sh
npm install --save react-timer-hoc
```
### Usage
Create a new component by wrapping your component with __timer(delay)(Component)__ HOC. Alongside the properties you specify, the created component will receive a `timer` property containing:
- A `tick` value (incremented)
- The specified `delay` value
- `stop`, `resume` and `setDelay` functions
__Important notice with ES5__
> babel 6 changed the way transpiled default exports work. See [Babel 6 changes how it exports default](http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default/33506169#33506169) on stack overflow.
```javascript
// ES5
var timer = require('react-timer-hoc').default;
```
```javascript
// ES2015+
import React from 'react';
import ReactDOM from 'react-dom';
import timer from 'react-timer-hoc';
function myComponent({ timer }) {
return
Started { timer.tick * timer.delay }ms ago.
}
const Timer1 = timer(1000)(myComponent);
const Timer2 = timer(2000)(myComponent);
ReactDOM.render(
,
document.getElementById('app')
);
```