hyperscript-like DOM builder with chaining, composition, and reusability. Inspired by hyperscript-helpers.
-
Property chaining sets tag-name and class-names
-
Template literals sets innerText
-
Compose and reuse components (like styled-components)
-
Apply CSS Modules (like hyperstyles)
Note: Uses ES6 features (Proxy, Tagged Template Literals), use only where browser/env supports it.
npm i hyperchainimport { createElement } from 'react'
import hyperchain from 'hyperchain'
const h = hyperchain(createElement, opts)
// or with helpers (available: react, preact)
const h = require('hyperchain/react')(opts)
const h = require('hyperchain/preact')(opts)h.div('hi') // => <div> hi </div>
h.span('hi') // => <span> hi </span>
h.p('a', 'b') // => <p> a b </p>
h.span`hi` // => <span> hi </span>
h.div({attr:'a'}) // => <div attr="a"></div>
h.div.class('a') // => <div class="class"> a </div>
h.div.class`a` // => <div class="class"> a </div>
h.div.some.class() // => <div class="some class">
h.div.someClass() // => <div class="someClass">
h.div.someClass() // => <div class="some-class"> (opts.dashifyClassnames: true)
h.div() // => <div class="div"> (opts.tagClass: true)
h.div.CSS() // => <div class="MODULES"> (opts.style: {CSS:'MODULES'})
h.div(1, 0, null, 2) // => <div> 1 2 </div> (opts.filterFalseyChildren: true)
h.div['#id']() // => <div id="id"></div>hyperchain(createElement, options)-
createElement[function]JSX/hyperscript reviver function -
options[object]style[object]Uses CSS Modules-compatible styles object to add appropriate classnames. See hyperstylesstylePreserveNames[boolean]Preserves original classnames in addition to CSS Module names replaced byopts.stylestyleOmitUnused[boolean]Omits classes from elements that aren't listed inopts.styledashifyClassnames[boolean]Turns.classNametoclass-nametagClass[boolean]Adds tag-name as an additional class-name (which is alsoopts.styleaware)filterFalseyChildren[boolean]Filters out falsey childrenelementMapMap[object]Map tagNames or components to something elsekeyMap[object]Map keys/attrs to something else
h.tagName[...className]`innerText`
h.tagName[...className](...children)
h.tagName[...className]({...props}, ...children)tagName[string]Tag name to use, eg..divclassName[string]Class name to use, eg..someClasschildren[array]Child nodesprops[object]Attributes to set as an object, eg.{id: …}