Hyperminimal functional DOM element microlibrary
JavaScript HTML
Latest commit c44f67a Sep 17, 2016 @jxnblk 1.0.0
Permalink
Failed to load latest commit information.
demo Clean up and add common elements Jul 16, 2016
src Add support for __html prop Sep 17, 2016
test Add support for __html prop Sep 17, 2016
.babelrc Init Jul 16, 2016
.gitignore Clean up and add common elements Jul 16, 2016
.npmignore Init Jul 16, 2016
.travis.yml Add travis config Jul 16, 2016
README.md Edit readme Sep 10, 2016
compositor.json Update compositor.json Sep 10, 2016
index.html Init Jul 16, 2016
package.json 1.0.0 Sep 17, 2016

README.md

h0

h0

Hyperminimal functional DOM element microlibrary

Build Status

Experimental

npm i h0

Basic usage

import h from 'h0'

const tree = h('div')({
  style: {
    padding: 32
  }
})(
  h('h1')('hello')
)

Creating element functions

const div = h('div')
const h1 = h('h1')
const a = h('a')

const tree = div(
  h1('hello'),
  a({ href: '/hello' })('hi')
)

Creating styled element functions

const h1 = h('h1')({
  style: {
    fontSize: 48,
    fontWeight: 500
  }
})

const tree = h1('hello')

API

h()

Function that returns an element creation function with the given tagname. The returned function accepts either a plain object to set attributes, or a string or child elements to return an element.

h('div')
// returns an element creation function
h('div')({ class: 'hi' })
// returns an element creation function with attributes
h('div')({ class: 'hi' })('hello')
// returns a DOM element with an id and text content
// <div class='hi'>hello</div>
h('div')({
  style: {
    color: 'blue'
  }
})('hello')
// Style objects are converted to strings
// <div style='color:blue'>hello</div>
h('div')('hello')
// returns a DOM element with text content
// <div>hello</div>
h('div')(
  h('h1')('hello')
)
// returns a DOM element with child element
// <div>
//   <h1>hello</h1>
// </div>

MIT License