Awesome Open Source
Awesome Open Source

Hyperapp FX

Build Status codecov npm Slack

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 { app, h, text } from "hyperapp"
import { Http } from "hyperapp-fx"

const GetQuote = () => [
  "...",
  Http({
    url: "https://api.quotable.io/random",
    action: (_, { content }) => content
  })
]

app({
  init: "Click here for quotes",
  view: quote => h("h1", { onclick: GetQuote }, text(quote)),
  node: document.getElementById("app")
})

More examples are available to show other effects in action.

Installation

npm i [email protected]

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/[email protected]"></script>

API documentation

License

Hyperapp FX is MIT licensed. See LICENSE.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,104
animation (1,032
http (895
keyboard (221
time (162
effects (86
fetch (85
history (80
localstorage (78
random (70
frame (28
debounce (19
throttle (19
delay (18
hyperapp (15

Find Open Source By Browsing 7,000 Topics Across 59 Categories