https://github.com/okwolf/hyperapp-fx

Effects for use with Hyperapp
https://github.com/okwolf/hyperapp-fx

animation debounce delay effects fetch frame history http hyperapp hyperapp-fx keyboard localstorage random requestanimationframe settimeout throttle time

Last synced: 3 months ago
JSON representation

Effects for use with Hyperapp

• Host: GitHub
• URL: https://github.com/okwolf/hyperapp-fx
• Owner: okwolf
• License: mit
• Created: 2017-11-07T07:02:27.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-02-07T01:36:20.000Z (almost 3 years ago)
• Last Synced: 2024-05-19T02:02:53.990Z (6 months ago)
• Topics: animation, debounce, delay, effects, fetch, frame, history, http, hyperapp, hyperapp-fx, keyboard, localstorage, random, requestanimationframe, settimeout, throttle, time
• Language: JavaScript
• Homepage:
• Size: 230 KB
• Stars: 113
• Watchers: 4
• Forks: 17
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• hyperawesome - okwolf/hyperapp-effects - Elm-style side effects as data. (Utilities V1)

README

        
# Hyperapp FX

[![Build Status](https://github.com/okwolf/hyperapp-fx/actions/workflows/ci.yml/badge.svg)](https://github.com/okwolf/hyperapp-fx/actions)

[![Codecov](https://img.shields.io/codecov/c/github/okwolf/hyperapp-fx/master.svg)](https://codecov.io/gh/okwolf/hyperapp-fx)

[![npm](https://img.shields.io/npm/v/hyperapp-fx.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/hyperapp-fx)

A handy set of effects for use with [Hyperapp](https://github.com/jorgebucaran/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](https://codepen.io/okwolf/pen/vPbMaa?editors=0010).

```js

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](https://github.com/okwolf/hyperapp-playground) are available to show other effects in action.

## Installation


npm i hyperapp-fx



Then with a module bundler like [Rollup](https://rollupjs.org) or [Webpack](https://webpack.js.org), use as you would anything else.

```js

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](https://esm.sh/hyperapp-fx). We support all modern browsers used by at least 1% of the world.

```js

import { Http } from "https://esm.sh/hyperapp-fx";

```

## [API documentation](api.md)

## License

Hyperapp FX is MIT licensed. See [LICENSE](LICENSE.md).