Element

The createElement function provides an function to create virtual elements that represent a snapshot of the interface in time.

interface createElement(
	type: Type
	props?: Props
	...children: any
): object

The h function: pronounced "hyperscript" provides an alias to createElement and vice-versa.

interface h(
	type: Type
	props?: Props
	...children: any
): object

Type

A variety of different element types are accepted as valid types.

type Type = string|function|object

Host Element

An element is called a host element when the type is typeof "string".

const example = h('h1')

Component Element

An element is a component element when the type is typeof "function".

const example = h(props => h('h1'))

Exotic Element

An element is exotic when the type is typeof "object". An example of this is an async element; When the type is a thenable.

const example = h(Promise.resolve('Hello'))

Props

Props represent properties delegated to an element.

interface Props {
	key?: string|number|symbol
	ref?: function|object
	on[event: string]: EventListener
	...[prop: string]: any
}

Amoung a host elements "props" there are three special prop types: keys, refs and events.

const example = h('button', {
	key: 'heading',
	ref: ref => {},
	onClick: event => {}
})

Keys

tyep Key = string|number|symbol

Refs

type Ref = function|object

function refs

const example = h('button', {
	ref: (value: object?) => {}
})

Function refs can optionally return a cleanup "function" for when the ref is changed/unmount.

const example = h('button', {
	ref: (value: object?) => {
		console.assert(value instanceof Node)
		return (value: object) => {}
	}
})

object refs

const example = h('button', {
	ref: {current: value}
})

Where value is an object for example from useRef

Events

type EventListener = function|Array<function>

Event Function

const example = h('button', {
	onClick: event => {}
})

Event Array

const example = h('button', {
	onClick: [event => {}, event => {}]
})

Children

type Children = function|string|number|iterable|thenable