:zap: A better element creation function (h) for preact

Why?

• You want to use preact with no build tool
• You are not in favor of extending the language with non-standard extensions

Why not preact's h?

Creating and reading dom structures is the bread and butter in creating UI. It should have minimal boilerplate. Thats what this library does - removing boilerplate.

// preact
h('div', null,
  h('p', null, 'Hello World!')
)

// preact-element
div(
  p('Hello World!')
)

Getting Started

With preact-element installed (using your favourite package manager), you can then import it. Each element in the DOM is exposed as a function when requiring preact-element.

Plain commonjs

const h = require('preact-element') // -> h.div()

Destructuring

const { div, h1 } = require('preact-element')

ES6

import { div, h1 } from 'preact-element'

Use it!

import { div, h1, h2, h3, button, ul, li } from 'preact-element'
import { render } from 'preact'

const App = ({ library }) => div(
  h1({ class: 'bold' }, library),
  h2({ id: 'subitle' }, 'Preact is a fast, 3kb alternative to React, with the same ES2015 API'),
  button({ href: 'http://ghub.io/preact' }, 'Learn More'),

  h3('Features'),
  ul(['preact', 'small', 'es2015', 'fast'].map(key => li(key)))
)

render(
  h(App, { library: 'Preact' }),
  document.body
)

API

attributes and children are optional.

createElement(tag, attributes?, ...children?)

[tag](attributes?, ...children?)

Where as tag is one of the html tags or svg tags.

Author

preact-element © Fabian Eichenberger, Released under the MIT License. Authored and maintained by Fabian Eichenberger with help from contributors (list).

GitHub @queckezz · Twitter @queckezz