react-timer-hoc

A React timer higher-order component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-timer-hoc
3912.3.07 years ago8 years agoMinified + gzip package size for react-timer-hoc in KB

Readme

npm version Build Status
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 and setDelay 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.

// ES5
var timer = require('react-timer-hoc').default;

// ES2015+
import React from 'react';
import ReactDOM from 'react-dom';
import timer from 'react-timer-hoc';

function myComponent({ timer }) {
    return <div>Started { timer.tick * timer.delay }ms ago.</div>
}

const Timer1 = timer(1000)(myComponent);
const Timer2 = timer(2000)(myComponent);

ReactDOM.render(
    <div>
        <Timer1 />
        <Timer2 />
    </div>,
    document.getElementById('app')
);