Hyperapp FX

A handy set of effects for use with Hyperapp.

Getting Started

Here's a taste of how to use a common effect for making HTTP requests. The app displays inspiring quotes about design, fetching a new quote each time the user clicks on the current one. Go ahead and try it online here.

import { h, app } from "hyperapp"
import { Http } from "hyperapp-fx"

const GetQuote = () => [
  "...",
  Http({
    url:
      "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
    action: (_, [{ content }]) => content
  })
]

app({
  init: "Click here for quotes",
  view: quote => <h1 onclick={GetQuote}>{quote}</h1>,
  container: document.body
})

More examples are available to show other effects in action.

Installation

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import { Http } from "hyperapp-fx"

If you don't want to set up a build environment, you can download Hyperapp FX from a CDN like unpkg.com and it will be globally available through the window.hyperappFx object. We support all ES5-compliant browsers, including Internet Explorer 10 and above. Use of the Http effect requires a polyfill.

<script src="https://unpkg.com/hyperapp-fx@next"></script>

API documentation

License

Hyperapp FX is MIT licensed. See LICENSE.