Hyperapp-page-router NPM

hyperapp-page-router

An ultra light and simple Hyperapp wrapper for Page router.

npm i hyperapp-page-router

Context Api

Create a Route Action

// actions.js
export const loadIndex = (state, context) => [{
  ...state,
  // set next page state
  title: "Loaded the index view"
}, [
  // run http or other effects to load external data etc.
]];

Create a Route View

Create any component view

// views.js
import { h, text } from "hyperapp"

export const IndexView = ({ title }) => h('h1', {}, text(title))

Register Route

Route actions are optional. Omit this if you just need to load a component view.

// routes.js
import { r } from "hyperapp-router-app"

import { loadIndex } from "./actions"
import { IndexView } from "./views"

r({ name: "index", path: "/", action: loadIndex, view: IndexView })

Place the Router Outlet

Normally this will be placed in your main layout or app shell

// App.js
import { h, text } from "hyperapp"
import { Outlet } from "hyperapp-page-router"

export default state =>
  h('div', {}, [
    h('header', {}, h('a', { href: "/" }, text("Home"))),
    Outlet(state)
  ])

Mount Router to app

// index.js
import { h, app } from "hyperapp"
import { withRouter } from "hyperapp-router-app"

import App from "./App"

withRouter(app)({
 init: { title: "It works!" },
 subscriptions: () => [],
 view: App,
 node: document.getElementById('app')
})

Create a Link

Using url will allow reverse lookups on the routes registered. You can use this in conjunction with any anchor tag to allow a customizable Link component to be used. As long as the resulting tag is an a tag, it will just work.

import { h, text } from "hyperapp"
import { url } from "hyperapp-page-router"

const Link = ({ name, params, query, ...state }, children) => h('a', { href: url({ name, params, query }), ...state }, children)