# h

> generate HTML from javascript array structures

Latest version **1.0.0** (published 2019-07-19) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-07-19 |
| First published | 2012-08-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 28 |
| Author | 'Dominic Tarr' @EMovhfIrFk4NihAKnRNhrfRaqIhBv1Wj8pTxJNgvCCY=.ed25519 |
| Maintainers | dominictarr |

## Links

- npm: https://www.npmjs.com/package/h
- Repository: https://github.com/dominictarr/h
- Issues: https://github.com/dominictarr/h/issues
- npm.io page: https://npm.io/package/h

## Dependencies (2)

- [cssesc](https://npm.io/package/cssesc.md) ^3.0.0
- [html-escape](https://npm.io/package/html-escape.md) ^2.0.0

## Recent versions

- 1.0.0 (latest) — 2019-07-19
- 0.1.0 — 2012-08-22
- 0.0.0 — 2012-08-20

## README

# h

generate HTML from javascript array structures

like hyperscript but with arrays instead of functions.
runs easily on the server and web workers, without a HtmlElement polyfil.

## Example

``` js

var toHTML = require('h')

toHTML(
  ['div#page',
    ['div#header',
      ['h1.classy', 'h')),
    ['div#menu', { style: 'float: left, width: 200px' } },
      ['ul',
        ['li', 'one'],
        ['li', 'two'],
        ['li', 'three']]],
    ['div#content', {style: 'float: left;' },
      ['h2', 'content title'],
      ['p', 
        "so it's just like a templating engine,\n",
        "but easy to use inline with javascript\n"],
      ['p', 
        "the intension is for this to be used to create\n",
        "reusable, interactive html widgets. "]]]
)

```

## toHTML (ary)

Create some html from an array structure.
If the first element in the array is a string, that's the tag name.
if it is an array of arrays, each item is mapped through `toHTML`
and the results are concatenated.

### classes & id

If the tag name is of form `name.class1.class2#id` that is a short cut
for setting the class and id.

### attributes

If an `{}` object is passed in, it's values will be used to set attributes.

``` js
h('a', {href: 'https://npm.im/h'}, 'h')
```

html attributes names must be alphanumeric but may have hypens.
attribute values will be escaped with `html-escape`.

### innerHTML: non-escaped html content.

sometimes it is necessary to output non-escaped html,
for example, rendered markdown, or the output of another templating library.
to do this, use the `{innerHTML:html}` attribute. Note, this will cause any
following children to be ignored.

### children - string

If an argument is a string, it will be escaped with `html-escape`

### children - null.

This is just ignored.

### children - Array

Each item in the array is treated like a ordinary child. (string or HTMLElement)
this is uesful when you want to iterate over an object:

```
['table',
  Object.keys(obj).map(function (k) {
    return ['tr'
      ['th', k],
      ['td', obj[k]]
    ]
  }]

```

## License

MIT

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