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
:
For custom components or tags not compiled by hh
:
;
component
is an HTML element as a string or a react function/class custom elementselector
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.
; ;
For custom components you can either create a factory function or use the h
function, similar to react-hyperscript.
//MyComponent; ; //Container;;; ;
A UMD build is also available
isRendered
The isRendered
property will determine whether or not a react component gets rendered.
const Khaled = ;; ;// -> null ;/* -> <div> <span>Another one</span> <span>Another one</span> <span>Another one</span> </div>*/
Alternatives
- https://github.com/uber/r-dom
- https://github.com/ohanhi/hyperscript-helpers
- https://github.com/mlmorg/react-hyperscript