# hyperapp-router

> A frontend route handler for hyperapp

Latest version **0.2.2** (published 2017-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install hyperapp-router
pnpm add hyperapp-router
yarn add hyperapp-router
bun add hyperapp-router
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2017-06-27 |
| First published | 2017-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Luke Jackson |
| Maintainers | jbucaran, lukejacksonn |
| Keywords | hyperapp, router |

## Links

- npm: https://www.npmjs.com/package/hyperapp-router
- Repository: https://github.com/lukejacksonn/hyperapp-router
- Homepage: https://github.com/lukejacksonn/hyperapp-router#readme
- Issues: https://github.com/lukejacksonn/hyperapp-router/issues
- npm.io page: https://npm.io/package/hyperapp-router

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.2.2 (latest) — 2017-06-27
- 0.2.1 — 2017-06-27
- 0.1.2 — 2017-04-24
- 0.0.1 — 2017-02-11
- 0.0.0 — 2017-02-11

## README

# HyperApp Router

Routing is the ability to move between different screens inside the same [HyperApp](https://github.com/hyperapp/hyperapp) application.

To add this functionality to your application, you can use `hyperapp-router` as a mixin.

```js
import { Router } from "hyperapp-router"
```

## Usage

```jsx
app({
  view: [
    ["/", (state, actions) => <h1>Home</h1>],
    ["/login", (state, actions) => <h1>Login</h1>],
    ["/:user", (state, actions) => <h1>Hi {state.router.params.user}</h1>],
    ["*", (state, actions) => <h1>404</h1>],
  ],
  mixins: [Router]
})
```

When the page loads or the browser fires a [popstate](https://developer.mozilla.org/en-US/docs/Web/Events/popstate) event, the first route that matches [location.pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location) will be rendered.

Routes are matched in the order in which they are declared. To use the wildcard <samp>*</samp> correctly, it must be declared last.

|route                    | location.pathname    |
|-------------------------|-----------------------------------|
| <samp>/</samp>          | <samp>/</samp>
| <samp>/:foo</samp>      | Match <samp>[A-Za-z0-9]+</samp>. See [params](#params).
| <samp>*</samp>          | Match anything.

To navigate to a different route use [actions.router.go](#go).

## API

### state
#### params

Type: { <i>foo</i>: string, ... }

The matched route params.

|route                 |location.pathname    |state.router.params  |
|----------------------|---------------------|---------------------|
|<samp>/:foo</samp>    |/hyper               | { foo: "hyper" }    |

#### match

Type: string

The matched route.

### actions
#### go

Type: ([path](#router_go_path))
* path: string

Update [location.pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location).

### events
#### route

Type: ([state](/docs/api.md#state), [actions](/docs/api.md#actions), [data](#events-data), [emit](/docs/api.md#emit)) | Array\<[route](#route)\>

* <a name="events-data"></a>data
  * [params](#params)
  * [match](#match)

Fired when a route is matched.

---
_Source: https://npm.io/package/hyperapp-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._