hyperapp-router v0.2.2

HyperApp Router

Routing is the ability to move between different screens inside the same HyperApp application.

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

import { Router } from "hyperapp-router"

Usage

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 event, the first route that matches location.pathname will be rendered.

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

To navigate to a different route use actions.router.go.

API

state

params

Type: { foo: string, ... }

The matched route params.

match

Type: string

The matched route.

actions

go

Type: (path)

• path: string

Update location.pathname.

events

route

Type: (state, actions, data, emit) | Array\<route>

• data
  • params
  • match

Fired when a route is matched.