H

Definition:

A function that creates virtual DOM nodes (VNodes) which are used for defining views.

Import & Usage:

import { h } from "hyperapp"

// ...

h(tag, props, children)

Signature & Parameters:

h : (String, Object, VNode? | [...VNodes]?) -> VNode

h() effectively represents the page elements used in your app. Because it's just JavaScript we can easily render whichever elements we see fit in a dynamical manner.

const hobbit = (wearingElvenCloak) =>
  h("div", {}, [
    !wearingElvenCloak && h("p", {}, text("Frodo")),
  ])

Parameters

tag

Name of the node. For example, div, h1, button, etc. Essentially any HTML element or SVG element or custom element.

props

HTML or SVG properties ("props") for the DOM element are defined using an object where the keys are the property names and the values are the corresponding property values.

h("input", {
  type: "checkbox",
  id: "picard",
  checked: state.engaging,
})

Hyphenated props will need to be quoted in order to use them. The quotes are necessary to abide by JavaScript syntax restrictions.

h("q", { "data-zoq-fot-pik": "Frungy" }, text("The Sport of Kings!"))

Certain properties are treated in a special way by Hyperapp.

class:

The classes to use with the VNode. The class prop can be given in various formats:

• As a string representing a class name. Because of the way Hyperapp internally processes class strings they're allowed to have a space-separated list of different class names.

  jsCopy

  h("div", { class: "muggle-studies" })
  

  <!-- In the "Harry Potter" book/movie series, "Muggle Studies" is a class that can be taken at the Hogwarts School of Witchcraft and Wizardry. -->

• As an object where the keys are the names of the classes while the values are booleans for toggling the classes.

  jsCopy

  h("div", { class: { arithmancy: true, "study-of-ancient-runes": true } })
  

  <!-- In the "Harry Potter" series, "Arithmancy" and "The Study of Ancient Runes" are classes that can be taken at Hogwarts. -->

• As an array that contains any combination of the various formats including this one.

  jsCopy

  h("div", { class: ["magical theory", "xylomancy"] })
  

  <!-- In the "Harry Potter" series, "Magical Theory" and "Xylomancy" are classes that can be taken at Hogwarts. -->

  This means the array format is recursive.

  jsCopy

  h("input", {
    type: "range",
    class: [
      { dragonzord: state.green && !state.white },
      "mastodon",
      state.pink && "pterodactyl",
      [
        { triceratops: state.blue },
        "sabretooth-tiger",
        state.red && "tyrannosaurus",
      ],
    ],
  })
  

  <!-- In the television show "Mighty Morphin Power Rangers", Tommy Oliver was initially the Green Ranger and eventually became the White Ranger. The Green Ranger's Zord was called the Dragonzord. The Black Ranger had the Mastodon Dinozord. The Pink Ranger had the Pterodactyl Dinozord. The Blue Ranger had the Triceratops Dinozord. The Yellow Ranger had the Sabretooth Tiger Dinozord. The Red Ranger had the Tyrannosaurus Dinozord. -->

style:

The inline CSS styles to use with the VNode. The style prop can be an object of CSS properties where the keys are the CSS property names and the values are the corresponding CSS property values. Hyphenated CSS property names can either be in camelCase or quoted to abide by JavaScript syntax restrictions.

h(
  "span",
  {
    style: {
      backgroundColor: "white",
      color: "blue",
      display: "inline-block",
      "font-weight": "bold",
    },
  },
  text("+\\")
)

key:

A unique string per VNode that helps Hyperapp track if VNodes are changed, added, or removed in situations where it's unable to do so, such as in arrays.

const pokedex = (pokemon) =>
  h(
    "ul",
    {},
    pokemon.map((p) => h("li", { key: p.id }, text(p.name)))
  )

Event Listeners

Props that represent event listeners, such as onclick, onchange, oninput, etc. are where you would assign actions to VNodes.

Synthetic events can be added in the same way as long as their name starts with "on", so an event created with

const buildEvent = new Event("build")

can be used like this:

h("button", { onbuild: BuildAction }, text("Click Me"))

children

The children of the VNode are other VNodes which are directly nested within it.

children can either be given as a single child VNode:

h("q", {}, text("There is no spoon."))

or as an array of child VNodes:

h("q", {}, [
  text("I know Kung Fu."),
  h("em", {}, text("Show me.")),
])

Other Considerations

JSX Support

Hyperapp doesn't support JSX out-of-the-box. That said you can use this custom JSX function to be able to use it.

import { h, text } from "hyperapp"

const jsxify = (h) => (type, props, ...children) =>
  typeof type === "function"
    ? type(props, children)
    : h(
        type,
        props || {},
        [].concat(...children).map((x) =>
          typeof x === "string" || typeof x === "number" ? text(x) : x
        )
      )

const jsx = jsxify(h) /** @jsx jsx */