Skip to content
Html helper functions for Hyperapp V1
Branch: master
Clone or download
Latest commit 4c6913c Mar 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Rename props to attributes. Mar 25, 2018
test
.gitignore Initial commit Jul 3, 2017
.travis.yml
LICENSE.md Add README.md Aug 12, 2017
README.md Simplify instructions. Mar 25, 2018
package.json 1.1.1 Mar 25, 2018
vars.json removed vvar tag (#12) Jan 17, 2018

README.md

@hyperapp/html

Tests Coverage npm Slack

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.

You can’t perform that action at this time.