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 { 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")
});
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
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 import Hyperapp FX from a CDN like esm.sh. We support all modern browsers used by at least 1% of the world.
import { Http } from "https://esm.sh/hyperapp-fx";
License
Hyperapp FX is MIT licensed. See LICENSE.