`hyperstyle()` Addon

The hyperstyle() creates a new hyperscript function h that you use to create your virtual DOM elements.

const h = nano.hyperstyle({
    foo: {
        color: 'red'
    }
});

const App = () =>
    h('div', {styleName: 'foo'}, 'My app...');

Then in your elements you use styleName prop to pick one of the defined styles.

For TypeScript you can set in tsconfig.json to use h as hyperscript function.

{
    "compilerOptions": {
        "jsxFactory": "h"
    }
}

For Babel you can use jsx pragma to set h as hyperscript function.

/** @jsx h */

This way you can use JSX in your code:

/** @jsx h */

const h = nano.hyperstyle({
    foo: {
        color: 'red'
    }
});

const App = () =>
    <div styleName="foo">My app..</div>;

Installation

Simply install hyperstyle addon and its dependencies: