Skip to content
Terse syntax for hyperscript using react
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci quick circleci 2 config Jun 27, 2018
src add umd build; remove ancient typescript bindings, will improve in fu… Jun 27, 2018
test quick circleci 2 config Jun 27, 2018
.babelrc add umd build; remove ancient typescript bindings, will improve in fu… Jun 27, 2018
.editorconfig adding editorconfig Feb 4, 2016
.eslintrc adding all the tags that react supports, including the svg ones Apr 6, 2016
.gitignore add umd build; remove ancient typescript bindings, will improve in fu… Jun 27, 2018
.npmignore add umd build; remove ancient typescript bindings, will improve in fu… Jun 27, 2018
LICENSE Initial commit Nov 21, 2015
README.md add umd build; remove ancient typescript bindings, will improve in fu… Jun 27, 2018
package.json 2.0.0 Jun 28, 2018
yarn.lock

README.md

react-hyperscript-helpers

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.

Why?

Pros

  • 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

Cons

  • 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

API

For elements that have already been compiled by hh:

tagName(selector)
tagName(props)
tagName(children)
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

Usage

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.

//MyComponent
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

<div id="app-root" />
<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-hyperscript-helpers@2.0.0/umd/react-hyperscript-helpers.min.js"></script>
<script>
  function Hello() {
    return rhh.div('hello world')
  }

  ReactDOM.render(rhh.h(Hello), document.getElementById('app-root'))
</script>

isRendered

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

Alternatives

References

You can’t perform that action at this time.