react-hs v0.1.3

react-hs

What is it?

Alternative to JSX, a simple wrapper around React.createElement supporting emmet style classes and id declaration.

h("div.info-form", {className: ["notice"]}, [
  h("form#comment", {}, [
    h("input", {type: "text"}, []),
    h("button.button-submit", {}, "Submit")
  ])
])

The snippet above will give the following HTML if rendered:

<div class="info-form">
  <form id="comment">
    <input type="text">
    <button class="button-submit">Submit</button>
  </form>
</div>

Docs

There is only one method exposed : h.
Its type definition is:

function h(
  componentOrTag: React.ComponentClass<any> | string,
  props: Object,
  children: Array<string | React.DOMElement<any>> | string
): React.DOMElement<any>;

All the params are mandatory, even if it's just empty.
If you are using typescript, this will be enforced for you, otherwise it will throw exceptions.

The string for a tag needs to start with the tag name (for example div) and can contain classes and id:

// OK
- div -> <div>
- div.something -> <div class="something">
- div#main -> <div id="main">

// NOT OK
- #main -> wrong
- .something -> wrong

Origin

I originally found react-hyperscript but it was depending on virtual-hyperscript for something that is ultimately quite simple.
This library also has mandatory parameters instead of optional ones to enforce consistency.