@bedard/h
TypeScript icon, indicating that this package has built-in type declarations

0.3.2 • Public • Published

@bedard/h

Build status Codecov NPM Bundle size License

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

Readme

Keywords

none

Package Sidebar

Install

npm i @bedard/h

Weekly Downloads

2

Version

0.3.2

License

MIT

Unpacked Size

39.6 kB

Total Files

20

Last publish

Collaborators

  • scottbedard