Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-07T01:36:20.000Z (over 2 years ago)
- Last Synced: 2024-04-04T03:42:42.409Z (3 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
Lists
- 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-fxThen 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 download Hyperapp FX from a CDN like [unpkg.com](https://unpkg.com/hyperapp-fx) 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`](api.md#module_fx.exports.Http) effect requires a polyfill.
```html
```
## [API documentation](api.md)
## License
Hyperapp FX is MIT licensed. See [LICENSE](LICENSE.md).