by Jador

Terse syntax for hyperscript using react

126 Stars 13 Forks Last release: Not found ISC License 44 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


npm version Circle CI

A library inspired by hyperscript-helpers and react-hyperscript.

Allows for expressing UIs in the hyperscript-helpers style but with first class support for React.



  • Consistent javascript syntax
  • Mistyped components return errors
  • No need to litter code with
    values when a component doesn't have any props
  • No need for a JSX syntax highlighter
  • No need for a JSX linter
  • JSX elements are just functions anyway


  • Most react documentation is written with JSX so it might be unfamiliar syntax
  • A lot of library components use JSX, so unless the compiled version of the library is used a JSX transform will be necessary


For elements that have already been compiled by

tagName(props, children)
tagName(selector, children)
tagName(selector, props, children)

For custom components or tags not compiled by

import { h } from 'react-hyperscript-helpers';

h(component, selector) h(component, props) h(component, children) h(component, props, children) h(component, selector, children) h(component, selector, props, children)

  • component
    is an HTML element as a string or a react function/class custom element
  • selector
    is a string, starting with "." or "#"
  • props
    is an object of attributes (the props of the component)
  • children
    is the innerHTML text (string|boolean|number), or an array of elements


DOM components are really easy to use. Just import and go.

import { div, h2 } from 'react-hyperscript-helpers';

export default () => div('.foo', [ h2('Hello, world') ]);

For custom components you can either create a factory function or use the

function, similar to react-hyperscript.
import { div, hh } from 'react-hyperscript-helpers';

export default hh(() => div('Nifty Component'));

//Container import MyComponent from './MyComponent'; import SomeOtherComponent from 'who-whats-its'; import { div, h } from 'react-hyperscript-helpers';

export default () => div('.foo', [ MyComponent(), h(SomeOtherComponent, { foo: 'bar' }) ]);

A UMD build is also available



property will determine whether or not a react component gets rendered.
const Khaled = ({ display }) => (
  div({ isRendered: display }, [
    span('Another one'),
    span('Another one'),
    span('Another one'),

h(Khaled, { display: false }); // -> null

h(Khaled, { display: true }); /* ->

Another one Another one Another one





We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.