babel-plugin-react-hyperscript

babel-plugin-react-hyperscript

HyperScript syntax for React components without runtime overhead.

Compiles react-hyperscript into React.createElement.

Example

Input

h('h1#boom.whatever.foo', [
  h('span'),
  h(MyComponent, { text: 'Hello!' })
]);

Output

React.createElement('h1', {
  id: 'boom',
  className: 'whatever foo'
},
React.createElement('span'),
React.createElement(MyComponent, { text: 'Hello!' }));

Installation

npm i babel-plugin-react-hyperscript

Plugin options

pragma

By default calls to h will be replaced with React.createElement, but you can override this with a custom pragma (including h itself when used with Preact).

{
  "plugins": ["react-hyperscript", { "pragma": "yo" }]
}

// Input
h('h1#boom.whatever.foo', [
  h('span'),
  h(MyComponent, { text: 'Hello!' })
]);

// Output
yo('h1', {
  id: 'boom',
  className: 'whatever foo'
},
yo('span'),
yo(MyComponent, { text: 'Hello!' }));

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["react-hyperscript"]
}

Via CLI

babel --plugins react-hyperscript script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["react-hyperscript"]
});

License

MIT