Hyperscript-like syntax for creating Preact elements
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bench inline style and classname sugar Jul 19, 2016
src fix: code typo Jan 14, 2017
test cosmetic fixes Jul 19, 2016
.gitattributes init Jul 18, 2016
.gitignore compile to es5 Jul 18, 2016
.npmignore compile to es5 Jul 18, 2016
.travis.yml test on node 6.x Jul 18, 2016
license init Jul 18, 2016
package.json Version 0.7.1 Jan 18, 2017
readme.md document sugar Jul 19, 2016

readme.md

preact-hyperscript

Hyperscript-like syntax for creating Preact elements.

Build status NPM version Dependency Status License Js Standard Style

Installation

> npm install preact-hyperscript

Example

→ Try this example on Codepen.io!

const { createElement, div, h1, h2, h3, button, ul, li } = require('preact-hyperscript')
const { render } = require('preact')

const h = createElement

const App = ({ library }) => div([
  h1('.bold', library),
  h2('#subtitle', '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
)

Guide

Component shorthand

Instead of calling createElement(Component, props) you can wrap your component into a createComponent call and invoke it using Component(props) directly:

const { createComponent, h1 } = require('preact-hyperscript')

const App = createComponent((props) => h1(props.text))

render(
  // instead of h(App, { text: 'test' }) you can do:
  App({ text: 'test' }),
  document.body
)

Syntax

Each element in the DOM is exposed as a function when requiring preact-hyperscript.

const { div, h1, p, button } = require('preact-hyperscript')

These functions have the following syntax:

tag(selector, attributes, children)

All arguments are optional with at least one argument needing to be present. This kind of function overloading allows you to iterate on your DOM structure really fast and reduce visual noise.

  • selector can be a class (prefixed with .) or an id (prefixed with a #). These can be mixed as you might expect: .title#id.pad.red
  • attributes is an object of dom attributes: { href: '#header' }
  • children can be a string for a text node or an array of nodes

Built-in sugar

Classes

Conditionally joins class names together. It utilizes JedWatson's awesome classnames. Visit the usage docs for more information.

Inline styles

Automatically converts style objects to a string. For an additional weight of ~400 bytes this is well worth it:

const style = {
  textDecoration: 'underline',
  fontSize: '56px'
}

const node = h1({ style }, 'hello!')
// -> <h1 style='text-decoration:underline;font-size:56px;'>hello!</h1>

Benchmarks

Some basic benchmarks for creating 10^5 nodes:

> npm run bench
native*100000: 31.481ms
hyperscript*100000: 114.727ms

Tests

> npm test

License

MIT