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 discussions repository, 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.

This module exports same utilities via uland/async, which is based on uhooks-dom/async for asynchronous hooks.

Announcement

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

Are you looking for SSR components? Then check 🦄 µland-ssr 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.