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 hyperchain

import{createElement}from'react'importhyperchainfrom'hyperchain'consth=hyperchain(createElement,opts)// or with helpers (available: react, preact)consth=require('hyperchain/react')(opts)consth=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 hyperstyles
  • stylePreserveNames[boolean] Preserves original classnames in addition to CSS Module names replaced by opts.style
  • styleOmitUnused[boolean] Omits classes from elements that aren't listed in opts.style
  • dashifyClassnames[boolean] Turns .className to class-name
  • tagClass[boolean] Adds tag-name as an additional class-name (which is also opts.style aware)
  • filterFalseyChildren[boolean] Filters out falsey children
  • elementMapMap[object] Map tagNames or components to something else
  • keyMap[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. .div
• className[string] Class name to use, eg. .someClass
• children[array] Child nodes
• props[object] Attributes to set as an object, eg. {id: …}