# hyperapp-router5-adapter

> Router5 adapter for Hyperapp

Latest version **0.2.3** (published 2018-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install hyperapp-router5-adapter
pnpm add hyperapp-router5-adapter
yarn add hyperapp-router5-adapter
bun add hyperapp-router5-adapter
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2018-12-08 |
| First published | 2018-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | gwn |
| Maintainers | gwn |
| Keywords | hyperapp, router5, router, navigation, history |

## Links

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

## Dependencies (1)

- [hyperapp](https://npm.io/package/hyperapp.md) ^1.2.6

## 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.3 (latest) — 2018-12-08
- 0.2.2 — 2018-11-26
- 0.2.1 — 2018-09-18
- 0.2.0 — 2018-09-05
- 0.1.0 — 2018-06-17

## README

## Router5 adapter for Hyperapp

### Quick example:

```javascript
const {
    makeRouterAdapter, subscribeRouter, Link,
} = require('hyperapp-router5-adapter')

const routerAdapter = makeRouterAdapter(router5Router)

const state = {
    router: routerAdapter.state,
}

const actions = {
    router: routerAdapter.actions,
}

const view = state => div([
    Link({ to: 'some-route' }, 'Click me'),
    Link({ to: 'some-other-route' }, 'No, click me'),

    p([
        'Current route is: ' + state.router.route.name,
    ]),
])

const wiredActions = app(state, actions, view, document.body)

router5Router.start(() => {
    subscribeRouter(router5Router, wiredActions.router)
})
```

### Install

```sh
npm install hyperapp-router5-adapter
```


### Demo

Check out the "demo" folder for a full demonstration.


### API

- `makeRouterAdapter(router5Router): { state, actions, fx }`

  Create an adapter for the given router.
  
  Accepts a Router5 router instance. Returns an object of router
  state, actions and fx. Compose them with your own initial state,
  actions and fx before creating the app.

- `subscribeRouter(router5Router, routerActions [, routerName]): fn`

  Subscribe the app to route changes. This needs to be called
  after the app is created as it needs to use the wired router
  actions. Call this after both the app and the router is started.

  Naming the router subscription via an optional `routerName`
  parameter is supported in case you would have multiple routers
  and would like to have Link components for both routers (An
  unlikely scenario but supported nonetheless).

  Returns an unsubscribe function.

- `Link(props, children): vnode`

  A link "component". Accepted props are `to`, `params`, `opts`
  and `router`. `to`, `params` and `opts` directly correspond to
  the first three parameters of the
  [`router.navigate`](https://router5.js.org/api-reference#navigate)
  method of Router5.

  `router` is an optional prop that can be used if you gave your
  router subscription a name when you invoked the
  `subscribeRouter` function. If you have multiple router
  subscriptions, you may need to pass the router subscription name
  to the Link component in order for it to use the correct router.
  If you only have a single router subscription, don't worry about
  this one.

- `navigate({ to, params, opts }): array`

  A navigate effect for the users of [Hyperapp
  FX](https://github.com/hyperapp/fx).

  Accepts an object with the keys `to`, `props` and `opts` which
  directly correspond to the first three parameters of the
  [`router.navigate`](https://router5.js.org/api-reference#navigate)
  method of Router5.

  Returns an effect complying with the Hyperapp FX effect format.

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