@bedard/h

Element builder to mirror Vue's h function. Typescript will infer the element properties and event listeners based on names.

import { h } from '@bedard/h'

h('button', { id: 'foo', onClick: handler }, 'Hello world')

// <button id="foo">Hello world</button>

Installation

The recommended installation method is via NPM.

npm install @bedard/h

Alternatively, this library may be accessed via a CDN.

<script src="https://unpkg.com/@bedard/h"></script>

Basic usage

The first argument is the element tag name, next are props, and finally the children. For convenience, the props argument may be omitted when an element has no attributes or event listeners.

import { h } from '@bedard/h'

// create elements by tag name
h('div')

// plain text can be provided as child data
h('div', 'Hello world')

// child data may also be an array of text and elements
h('div', ['Hello', h('span', 'world')])

// attach props and listeners with `onEvent` names, typescript will infer the event type
h('button', { type: 'submit', onClick: handler }, 'Click here')

Use svg to create http://www.w3.org/2000/svg namespace elements

import { svg } from '@bedard/h'

svg('circle', { fill: 'red' })

License

MIT

Copyright (c) 2024-present, Scott Bedard