https://github.com/mrozbarry/hyperapp-router

A modern router for hyperapp
https://github.com/mrozbarry/hyperapp-router

Last synced: 3 months ago
JSON representation

A modern router for hyperapp

• Host: GitHub
• URL: https://github.com/mrozbarry/hyperapp-router
• Owner: mrozbarry
• Created: 2020-03-10T00:06:51.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T09:34:15.000Z (over 1 year ago)
• Last Synced: 2024-03-22T04:20:53.746Z (3 months ago)
• Language: JavaScript
• Homepage: http://hyperapp-hn.surge.sh/
• Size: 827 KB
• Stars: 21
• Watchers: 4
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Lists

• hyperawesome - hyperapp-router - A router for Hyperapp (Utilities)

README

        
# Hyperapp Router

[![npm (scoped)](https://img.shields.io/npm/v/@mrbarrysoftware/hyperapp-router?style=flat-square)](https://www.npmjs.com/package/@mrbarrysoftware/hyperapp-router)

> **Warning**

This is a beta release, and the API will be completely unstable.

Expect any change to be breaking until a proper API is ironed out.

## Install

```bash

npm install --save @mrbarrysoftware/hyperapp-router

# or

yarn add @mrbarrysoftware/hyperapp-router

```

## Usage

```js

import { app, h, text } from 'hyperapp';

import withRouter, { effects } from '@mrbarrysoftware/hyperapp-router';

const GoToHref = (state, { href }) => [

  state,

  effects.Navigate({ href }), // where href is a string, like `/route/path/here`

];

withRouter(app)({

  router: {

    // Optional base url for the app.

    // Use this if your app runs from anywhere that

    // isn't at the root of the server.

    // Defaults to '/'

    baseUrl: '/foo',

    // Optional action ran every push/pop state

    // Useful when you just need navigation to

    // set something in state

    RouteAction: (state, { params, path }) => ({

      ...state,

    }),

    // Optional boolean

    // Prevents the router from capturing every

    // click on an anchor and attempting to route

    // it. Removing this means you will need to

    // add custom actions and effects to allow

    // navigation with the router.

    // If not set, the default is false, and that's

    // probably what you want.

    disableAnchorCapture: false,

    

    routes: {

      '/': {

        // Optional Action to run when entering this route

        OnEnter: (state, params) => ({

          ...state,

        }),

        // Optional Action to run when leaving this route

        OnLeave: (state, params) => ({

          ...state,

        }),

      },

    },

  },

  init: {},

  view: state => {

    return h('div', null, text('Your app here...'));

  },

  node: document.querySelector('#app'),

});

```