# little-h

> A tiny (1Kb) library that builds the dom

Latest version **0.0.3** (published 2021-10-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install little-h
pnpm add little-h
yarn add little-h
bun add little-h
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-10-08 |
| First published | 2021-10-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | hanayashiki |
| Maintainers | chenyuwang |
| Keywords | react, html, dom, tiny |

## Links

- npm: https://www.npmjs.com/package/little-h
- Repository: https://github.com/hanayashiki/little-h
- npm.io page: https://npm.io/package/little-h

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2021-10-08
- 0.0.2 — 2021-10-08

## README

# Little H

+ No transpiler bullshit.

+ Use react-like API to build the UI, but does not help you update it frequently.

+ Ignorable 1Kb size.

```html
<html>
  <head>
    <title>
      My Little Page
    </title>

    <style>
      .search-form-header {
        background: red;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import { h } from 'https://unpkg.com/little-h@latest/dist/index.module.js';

      const Header = () => {
        return h('div',
          { class: 'search-form-header' },
          h('h1', {}, 'Weather Search'),
          h('p', {}, 'Fill out the form to get weather info!'),
        );
      };

      document.body.appendChild(h(Header).render());
    </script>
  </body>
</html>
```

## Installation

1. Install via package manager

    ```
    yarn add light-h
    # npm i light-h
    ```

2. Import via ECMAScript Module

    ```html
    <script type="module">
      import { h } from 'https://unpkg.com/little-h@latest/dist/index.module.js';

      // do something with h

    </script>
    ```

    Make sure you have `type="module"` in the script attributes and your browser (thankfully) supports necesssary ES6 features.

## API Reference

+ `h(component, [props], [...children])`
  + Create a element (virtual dom) representing the UI you want to build.

+ `useRef`
  + [useRef](https://reactjs.org/docs/hooks-reference.html#useref) hook

+ `useEffect`
  + [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) hook

+ `Element.render`
  + Build the virtual element into HTML element.

---
_Source: https://npm.io/package/little-h · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._