Terse syntax for hyperscript using react

Usage no npm install needed!

<script type="module">
  import reactHyperscriptHelpers from '';



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 null 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 hh:

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

For custom components or tags not compiled by hh:

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 h function, similar to react-hyperscript.

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

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

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

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

A UMD build is also available

<div id="app-root" />
<script src=""></script>
<script src=""></script>
<script src=""></script>
  function Hello() {
    return rhh.div('hello world')

  ReactDOM.render(rhh.h(Hello), document.getElementById('app-root'))


The isRendered 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 });
/* ->
    <span>Another one</span>
    <span>Another one</span>
    <span>Another one</span>