uland

🦄 µland

^{Social Media Photo by Ben Klea on Unsplash}

micro land, or unicorn land, is a µhtml take at neverland.

📣 Community Announcement

Please ask questions in the dedicated forum to help the community around this project grow ♥

---

Same API, except the exports are {Component, render, html, svg}, where Component is a function you can use either as new Component(...) or just Component(...) which is the equivalent of neverland default export.

Announcement

Are you looking for something even more similar to React? Then don't miss 🐪 kaboobie out!

API

The concept is exactly the same as the neverland one, the render(...) accepts a node to render, and either a component or a callback that returns some content.

Live demo.

import {Component, render, html, useState} from 'uland';

const Counter = Component((initialState) => {
  const [count, setCount] = useState(initialState);
  return html`
  <button onclick=${() => setCount(count + 1)}>
    Count: ${count}
  </button>`;
});

// basic example, show two independent counters
render(document.body, () => html`
  <div>
    A bounce of counters.<hr>
    ${Counter(0)} ${Counter(1)}
  </div>
`);

Please check neverland to know more about this module usage.