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.
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
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
andsetDelay
functions
Important notice with ES5
babel 6 changed the way transpiled default exports work. See Babel 6 changes how it exports default on stack overflow.
// ES5var timer = default;
// ES2015+;;; { return <div>Started timertick * timerdelay ms ago</div>} const Timer1 = myComponent;const Timer2 = myComponent; ReactDOM;