https://github.com/webreflection/uland

A µhtml take at neverland
https://github.com/webreflection/uland

Last synced: 5 months ago
JSON representation

A µhtml take at neverland

• Host: GitHub
• URL: https://github.com/webreflection/uland
• Owner: WebReflection
• License: isc
• Created: 2020-06-20T21:00:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-05-23T07:37:43.000Z (over 3 years ago)
• Last Synced: 2025-08-31T11:36:15.014Z (5 months ago)
• Language: JavaScript
• Size: 257 KB
• Stars: 111
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🦄 µland

[![CSP strict](https://webreflection.github.io/csp/strict.svg)](https://webreflection.github.io/csp/#-csp-strict)

![tiny island](./uland-head.jpg)

**Social Media Photo by [Ben Klea](https://unsplash.com/@benkleaphoto) on [Unsplash](https://unsplash.com/)**

*micro* land, or *unicorn* land, is a [µhtml](https://github.com/WebReflection/uhtml#readme) take at [neverland](https://github.com/WebReflection/neverland/#readme).

### 📣 Community Announcement

Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), 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](https://github.com/WebReflection/kaboobie/#readme) out!

Are you looking for *SSR* components? Then check [🦄 µland-ssr](https://github.com/WebReflection/uland-ssr#readme) 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](https://codepen.io/WebReflection/pen/dyGvNdg?editors=0010).

```js

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

const Counter = Component((initialState) => {

  const [count, setCount] = useState(initialState);

  return html`

   setCount(count + 1)}>

    Count: ${count}

  `;

});

// basic example, show two independent counters

render(document.body, () => html`

  


    A bounce of counters.


    ${Counter(0)} ${Counter(1)}

  

`);

```


Please [check neverland](https://github.com/WebReflection/neverland/#concept) to know more about this module usage.