@ifaxity/hyper

@ifaxity/hyper

A modern hyperscript inspired library with IE9+ support.

Supports JSX and fragments, through this typescript config.

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es5", "es6", "dom"],
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
  }
}

And then in you code import the required members

import { h, Fragment, render } = from '@ifaxity/hyper';

function Button(props) {
  function onClick() {
    console.log('CLICKED');
  }

  return (
    <button onClick={props.onClick || onClick}>{props.children}</button>
  );
}

const app = (
  <>
    <h1>Click the button below</h1>
    <Button onClick={() => alert('CLICKED')}>Click me</Button>
  </>
);

render(app, '#app');

Dont want to use JSX? Thats fine.

Thats fine! You can use the tag shorthands (only for the most common tags) or the h factory directly.

import { h, button, render, fragment } = from '@ifaxity/hyper';

function Button(props) {
  function onClick() {
    console.log('CLICKED');
  }

  return button({ onClick: props.onClick || onClick }, props.children);
}

const app = fragment(
  h('h1#header'),
  h(Button, { onClick: () => alert('CLICKED') }, 'Click me')
);

render(app, '#app');