Html helper functions for Hyperapp V1
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Rename props to attributes. Mar 25, 2018
test Use {} instead of null. Mar 25, 2018
.gitignore Initial commit Jul 3, 2017
.travis.yml Don't test node 6. Jan 14, 2018
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.