Avalander / html

Html helper functions for Hyperapp.

@hyperapp/html

Html helper functions for Hyperapp. Use @hyperapp/html as an alternative to JSX or the hyperapp.h function.

Installation

npm i @hyperapp/html

Don't want to set up a build environment? Download @hyperapp/html from unpkg.com/@hyperapp/html and it will be globally available through the window.hyperappHtml object.

Usage

Here is a counter that can be incremented or decremented. Go ahead and try it online.

import { h, app } from "hyperapp"
import { div, h1, button } from "@hyperapp/html"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) =>
  div([
    h1(state.count),
    button({ onclick: actions.down }, "-"),
    button({ onclick: actions.up }, "+")
  ])

app(state, actions, view, document.body)

See /vars.json for the list of available Html tags you can use in your program.

License

@hyperapp/html is MIT licensed. See LICENSE.