search

okwolf / hyperapp-fx

Effects for use with Hyperapp
MIT License
115 stars 17 forks source link
animation debounce delay effects fetch frame history http hyperapp hyperapp-fx keyboard localstorage random requestanimationframe settimeout throttle time

readme

Hyperapp FX

Build Status Codecov npm

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 hyperapp-fx

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";

API documentation

License

Hyperapp FX is MIT licensed. See LICENSE.