@mojule/h

API for creating DOM nodes, like hyperscript

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Oct 4, 2018May 15, 2017Minified + gzip package size for @mojule/h in KB

Readme

h

API for creating DOM nodes, like hyperscript

npm install @mojule/h

const H = require( '@mojule/h' )

// window.document, JSDOM document instance, etc
const h = H( document )

const { element, textNode, comment, documentFragment, div, p } = h

const dom = div(
  p(
    {
      id: 'foo',
      click: e => console.log( 'clicked #foo' ),
      data: {
        fooBar: 'baz'
      },
      style: {
        fontSize: '16px',
        'font-weight': 'bold'
      }
    },
    documentFragment(
      element( 'custom-tag', 'hello' ),
      // text node as string literal
      ' ',
      // or explicitly
      textNode( 'world' ),
      comment( 'bar' )
    )
  )
)

// <p id="foo" data-foo-bar="baz" style="font-size: 16px; font-weight: bold;"><custom-tag>hello</custom-tag> world<!--bar--></p>
console.log( dom.innerHTML )

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.