Package Exports

virtual-hyperscript-hook

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (virtual-hyperscript-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

virtual-hyperscript-hook

element lifecycle hooks for virtual-dom

Instead of adding hook/unhook lifecycle events on a per-property basis with a hook instance, this package lets you define simple hook and unhook properties as ordinary functions.

example

view this example

In this example, we'll construct 10 text input boxes and use the arrow keys to adjust focus. We can use a simple hook: function (elem) { if (active) elem.focus() } to focus the text boxes based on the main-loop state.

var vdom = require('virtual-dom')
var h = require('virtual-hyperscript-hook')(vdom.h)
var main = require('main-loop')
var state = { focus: 0 }
var loop = main(state, render, vdom)
function update (st) { state = st; loop.update(st) }
document.querySelector('#content').appendChild(loop.target)

window.addEventListener('keydown', function (ev) {
  if (ev.keyCode === 38) {
    update({ focus: (state.focus - 1 + 10) % 10 })
  }
  if (ev.keyCode === 40) {
    update({ focus: (state.focus + 1) % 10 })
  }
})

function render (state) {
  var inputs = []
  for (var i = 0; i < 10; i++) (function (n) {
    var active = state.focus === n
    inputs.push(h('div', h('input', {
      style: { backgroundColor: active ? 'lime' : 'lightgray' },
      hook: function (elem) {
        if (active) elem.focus()
      },
      onfocus: function () { update({ focus: n }) }
    })))
  })(i)
  return h('div', inputs)
}

api

var vdom = require('virtual-dom')
var vhook  require('virtual-hyperscript-hook')

or:

var h  require('virtual-hyperscript-hook/h')

var h = vhook(vdom.h, opts)

Create a virtual-hyperscript function h from a hyperscript implementation vdom.h and some options opts.

opts.prefix - optional prefix to add before hook and unhook names. default: ''
opts.hookName - property to use for hooking. default: 'hook'
opts.unhookName - property to use for unhooking. default: 'unhook'
opts.attrName - fake attribute to use for element access. default: 'hook-attr'

var dom = h(tagName, properties={}, children)

Create a virtual-dom instance dom.

properties.hook - after element construction, properties.hook(elem) gets called with the real dom element elem
properties.unhook - after the element is removed from the dom, properties.unhook(elem) gets called with the real dom element elem

The key names of hook and unhook may be overridden by opts.hookName and opts.unhookName.

install

With npm do:

npm install virtual-hyperscript-hook

license

MIT