Lit UI Router

ui-router-mobx ​

NPM VersionGitHub Release

ui-router-mobx provides MobX bindings for a @uirouter/core router: an observable store of its current state. It imports only mobx and @uirouter/core, so any MobX reaction can follow route state without Lit. lit-ui-router-mobx builds its Lit controllers on it and re-exports RouterStore.

Installation ​

bash
npm install ui-router-mobx@rc mobx

@uirouter/core and mobx are peer dependencies. Both MobX majors are supported (mobx@^6.0.0 || ^7.0.0), and the store's API is the same on either.

RouterStore ​

RouterStore.for(router) returns the router's observable store. The first call for a router creates its one store and registers one onSuccess transition hook that updates it. Later calls return the same store. The store and the hook live as long as the router.

Any MobX reaction, autorun or computed that reads the store re-runs when the values it reads change:

ts
import { reaction } from 'mobx';
import { RouterStore } from 'ui-router-mobx';

const store = RouterStore.for(router);

const dispose = reaction(
  () => store.includes('admin.**'),
  (inAdmin) => console.log(inAdmin ? 'entered admin' : 'left admin'),
);
MemberValue
currentthe current state declaration
paramsthe current parameter values, a fresh object per transition
transitionthe most recent successful transition
includes(stateOrName, params?)an observable StateService.includes, globs like 'a.**' included

Each field is replaced per transition, never mutated, so a reaction compares them by reference.

To manage a store yourself, call attach(router) on a new RouterStore(). It returns the hook's deregistration function, and it throws if the store already mirrors a different router.

Further reading ​