https://github.com/troch/deku-timer

A deku higher-order timer component
https://github.com/troch/deku-timer

Last synced: 11 days ago
JSON representation

A deku higher-order timer component

• Host: GitHub
• URL: https://github.com/troch/deku-timer
• Owner: troch
• License: mit
• Created: 2015-11-28T15:10:12.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-28T21:29:55.000Z (almost 9 years ago)
• Last Synced: 2024-04-24T19:12:10.444Z (7 months ago)
• Language: JavaScript
• Size: 17.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-deku - deku-timer - higher-order timer component for timers, countdowns and any time-based contents (Components)

README

        
[![npm version](https://badge.fury.io/js/deku-timer.svg)](https://badge.fury.io/js/deku-timer)

[![Build Status](https://travis-ci.org/troch/deku-timer.svg?branch=master)](https://travis-ci.org/troch/deku-timer)

# Deku timer component (higher-order)

> A deku 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://requirebin.com/?gist=752d87b73f7d607ccbf9

### Applications

- Countdowns (time remaining)

- Timers (time elapsed)

- Forcing updates / refresh of time-based contents

### Installation

```sh

npm install --save deku-timer

```

### Usage

Create a new component by wrapping your component with `timer` HOC. Alongside the properties you specify, the created component will receive a `tick` property, the specified `delay` value and a `stop` function.

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('deku-timer').default;

```

```javascript

import element from 'virtual-element';

import { tree, render } from 'deku';

function myComponent({ tick, stop, delay }) {

    return element('div', {}, 'Started ' + tick * delay + 'ms ago.');

}

const Timer1 = timer(1000)({ render: myComponent });

const Timer2 = timer(2000)({ render: myComponent });

const app = tree(

    element('div', {}, [

        element(Timer1),

        element(Timer2)

    ])

);

render(app, document.body);

```