# mobx-little-router

> Implementation of an universal router that uses MobX to manage state.

Latest version **1.8.2** (published 2018-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install mobx-little-router
pnpm add mobx-little-router
yarn add mobx-little-router
bun add mobx-little-router
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.2 |
| Published | 2018-08-14 |
| First published | 2017-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 344.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 44 |
| Maintainers | corban, jaysoo |

## Links

- npm: https://www.npmjs.com/package/mobx-little-router
- Repository: git@github.com:mobx-little-router/mobx-little-router
- npm.io page: https://npm.io/package/mobx-little-router

## Dependencies (1)

- [url-pattern](https://npm.io/package/url-pattern.md) ^1.0.3

## Recent versions

- 1.8.2 (latest) — 2018-08-14
- 2.0.0-20 (canary) — 2018-07-30
- 1.8.1 — 2018-08-14
- 2.0.0-19 — 2018-07-30
- 2.0.0-18 — 2018-07-30
- 2.0.0-17 — 2018-07-30
- 2.0.0-16 — 2018-07-30
- 2.0.0-15 — 2018-07-30
- 2.0.0-14 — 2018-07-30
- 2.0.0-10 — 2018-07-18
- 2.0.0-9 — 2018-07-16
- 2.0.0-5 — 2018-07-11
- 2.0.0-4 — 2018-07-09
- 2.0.0-3 — 2018-07-06
- 2.0.0-2 — 2018-06-27
- … 86 more at https://npm.io/package/mobx-little-router/versions

## README

# mobx-little-router

This package provides the core functionality of the MobX little router.

## Getting Started

Import the `install` function from package, along with your chosen history creator from `history` package.

```js
import { install } from 'mobx-little-router'
import { createMemoryHistory } from 'history'

const ROUTES = [{ path: ':whatever' }]

const router = install({
  history: createMemoryHistory(),
  routes: ROUTES
})
```

Then run `router.start(...)` which takes in a callback when initialization finishes.

```js
import { autorun } from 'mobx'

router.start(() => {
  autorun(() => console.log(`path = ${router.store.location.pathname}`))

  router.push('/a') // Prints "path = /a/"
  router.push('/b') // Prints "path = /b/"
  router.push('/c') // Prints "path = /c/"

  router.push('/not/found') // Navigation aborts since path cannot be matched from config.
})
```

### Install options

The `install` function takes the following options:

- `history` - The history object created from [`history`](https://github.com/ReactTraining/history/).
- `getContext` - A function that returns a context object that is accessible from each route. This is useful for
  sharing MobX stores or other injectable objects.
- `middleware` - Custom router middleware for your application.
- `routes` - A list of initial route configuration of type `Config[]`, where

  ```js
  type Config = {
    path: string,

    // Static child routes.
    children?: Config[],

    // Dynamic child routes
    loadChildren?: () => Promise<Config[]>,

    // Guard functions that can block a route from activating or deactivating.
    canActivate?: (route: Route<*, *>) => boolean | Promise<void>,
    canDeactivate?: (route: Route<*, *>) => boolean | Promise<void>,

    // Called for each activation or query/param changes to the route.
    // Used for resolving effects.
    willResolve?: (route: Route<*, *>) => Promise<void>,

    onTransition?: (evt: TransitionEvent) => Promise<void>
  }
  ```

  For more type information, check out the [`routing/types.js`](./src/model/types.js)
  file.

## Documentation

- [Introduction](./docs/intro/README.md)
- [Basics](./docs/basics/README.md)
- [Advanced](./docs/advanced/README.md)

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