react-hyperscript-helpers

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:

1tagName(selector)
2tagName(props)
3tagName(children)
4tagName(props, children)
5tagName(selector, children)
6tagName(selector, props, children)

For custom components or tags not compiled by hh:

1import { h } from 'react-hyperscript-helpers';
2
3h(component, selector)
4h(component, props)
5h(component, children)
6h(component, props, children)
7h(component, selector, children)
8h(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.

1import { div, h2 } from 'react-hyperscript-helpers';
2
3export 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.

1//MyComponent
2import { div, hh } from 'react-hyperscript-helpers';
3
4export default hh(() => div('Nifty Component'));
5
6//Container
7import MyComponent        from './MyComponent';
8import SomeOtherComponent from 'who-whats-its';
9import { div, h }         from  'react-hyperscript-helpers';
10
11export default () => div('.foo', [
12  MyComponent(),
13  h(SomeOtherComponent, { foo: 'bar' })
14]);

A UMD build is also available

1<div id="app-root" />
2<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
3<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
4<script src="https://unpkg.com/react-hyperscript-helpers@2.0.0/umd/react-hyperscript-helpers.min.js"></script>
5<script>
6  function Hello() {
7    return rhh.div('hello world')
8  }
9
10  ReactDOM.render(rhh.h(Hello), document.getElementById('app-root'))
11</script>

isRendered

The isRendered property will determine whether or not a react component gets rendered.

1const Khaled = ({ display }) => (
2  div({ isRendered: display }, [
3    span('Another one'),
4    span('Another one'),
5    span('Another one'),
6  ]);
7);
8
9h(Khaled, { display: false });
10// -> null
11
12h(Khaled, { display: true });
13/* ->
14  <div>
15    <span>Another one</span>
16    <span>Another one</span>
17    <span>Another one</span>
18  </div>
19*/

Alternatives

• https://github.com/uber/r-dom
• https://github.com/ohanhi/hyperscript-helpers
• https://github.com/mlmorg/react-hyperscript

References

• https://facebook.github.io/react/docs/displaying-data.html#react-without-jsx
• https://github.com/ustun/react-without-jsx
• http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/