Need help with react-hyperscript-helpers?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Jador
126 Stars 13 Forks ISC License 44 Commits 6 Opened issues

Description

Terse syntax for hyperscript using react

Services available

!
?

Need anything else?

Contributors list

# 540,393
JavaScr...
17 commits
# 85,952
HTML
tokeniz...
Redux
sagas
5 commits
# 68,682
React
webasse...
TypeScr...
Markdow...
1 commit

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

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 }); /* ->

Another one Another one Another one
*/

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/

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.