Skip to content

laggingreflex/hyperchain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hyperchain

npm

hyperscript-like DOM builder with chaining, composition, and reusability. Inspired by hyperscript-helpers.

Features

Note: Uses ES6 features (Proxy, Tagged Template Literals), use only where browser/env supports it.

Install

npm i hyperchain

Usage

import { 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>

API

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: …}

About

hyperscript with chaining

Resources

Stars

Watchers

Forks

Packages

No packages published