# @storeon/router

> Storeon module for URL routing

Latest version **2.0.1** (published 2020-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storeon/router
pnpm add @storeon/router
yarn add @storeon/router
bun add @storeon/router
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-10-11 |
| First published | 2019-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ivan Solovev |
| Maintainers | isolovev, ai |

## Links

- npm: https://www.npmjs.com/package/@storeon/router
- npm.io page: https://npm.io/package/@storeon/router

## Recent versions

- 2.0.1 (latest) — 2020-10-11
- 2.0.0 — 2020-10-11
- 1.2.0 — 2020-05-31
- 1.1.0 — 2020-05-25
- 1.0.1 — 2020-04-09
- 1.0.0 — 2020-03-23
- 0.3.1 — 2020-02-06
- 0.3.0 — 2019-10-19
- 0.2.1 — 2019-08-18
- 0.2.0 — 2019-06-02
- 0.1.0 — 2019-05-22

## README

# Storeon Router

<img src="https://storeon.github.io/storeon/logo.svg" align="right"
     alt="Storeon logo by Anton Lovchikov" width="160" height="142">

[Storeon] Router solves the problems of routing while seamlessly providing full control.

Its size is 577 bytes (minified and gzipped) and uses [Size Limit] to control size.

[Storeon]: https://github.com/storeon/storeon
[Size Limit]: https://github.com/ai/size-limit


```js
import { createStoreon } from 'storeon'
import { createRouter, routerChanged, routerKey } from '@storeon/router'

const store = createStoreon([
  createRouter([
    ['/', () => ({ page: 'home' })],
    ['/blog', () => ({ page: 'blog' })],
    ['/blog/post/*', (id) => ({ page: 'post', id })],

    [
      /^blog\/post\/(\d+)\/(\d+)$/,
      (year, month) => ({ page: 'post', year, month })
    ]
  ])
])

setData(store.get()[routerKey])

store.on(routerChanged, function (_, data) {
  setData(data)
})

function setData (data) {
  document
    .querySelector('.data')
    .innerText = JSON.stringify(data)
}
```

<a href="https://evrone.com/?utm_source=storeon-router">
    <img src="https://solovev.one/static/evrone-sponsored-300.png" alt="Sponsored by Evrone" width="210">
</a>


## Installation

```
npm install @storeon/router
# or
yarn add @storeon/router
```


## Examples

* [Vanilla](./examples/vanilla/)
* [React/Preact](./examples/react/)
* [Svelte](./examples/svelte/)


## API

```js
import { createRouter } from '@storeon/router'

const moduleRouter = createRouter([
  [path, callback]
])
```

Function `createRouter` could have options:

* __path__: path name can be a string or RegExp.
* __callback__: the callback function must return an object with parameters for this path.

`routerKey` – key for store.

`routerNavigate` – navigation action.

`routerChanged` – change event of pathname.


### Ignore link

Add `data-ignore-router` attribute to the link so that the router ignores it.

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