You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
const{ createElement, div, h1, h2, h3, button, ul, li }=require('preact-hyperscript')const{ render }=require('preact')consth=createElementconstApp=({ library })=>div([h1('.bold',library),h2('#subtitle','Preact is a fast, 3kb alternative to React, with the same ES2015 API'),button({href: 'https://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')constApp=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.
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: