lit-ui-router-mobx / RouterReactionController

Class: RouterReactionController<T>

Defined in: router-reaction-controller.ts:49

A ReactionController preselected on the router: observes the RouterStore of the host's <ui-router> context.

On hostConnected it discovers the router through the ui-router-context event (no prop drilling, no store wiring in router configuration — RouterStore.for attaches lazily on first use), then runs a MobX reaction over the selector while the host is connected:

class App extends LitElement {
  private active = new RouterReactionController(this, (route) =>
    route.includes('admin.**'),
  );

  render() {
    return html`...${this.active.value ? 'admin' : ''}...`;
  }
}

The reaction fires immediately on every (re)connect, so sticky routed components resynchronize with the current route instead of rendering stale values. If the host is not inside a <ui-router> (and no explicit router option is given), the controller is a no-op until reconnected under one.

Type Parameters

Type Parameter
T

Implements

• ReactiveController

Constructors

Constructor

new RouterReactionController<T>(
   host,
   selector,
options?): RouterReactionController<T>;

Defined in: router-reaction-controller.ts:58

Parameters

Parameter	Type
host	ReactiveControllerHost & Element
selector	(store) => T
options	RouterReactionControllerOptions<T>

Returns

RouterReactionController<T>

Properties

Property	Type	Description	Defined in
store?	RouterStore	The observed store; set while connected to a router context.	router-reaction-controller.ts:54
value	T	The selected value, for use in render().	router-reaction-controller.ts:51

Methods

hostConnected()

hostConnected(): void;

Defined in: router-reaction-controller.ts:66

Called when the host is connected to the component tree. For custom element hosts, this corresponds to the connectedCallback() lifecycle, which is only called when the component is connected to the document.

Returns

void

Implementation of

ReactiveController.hostConnected;

---

hostDisconnected()

hostDisconnected(): void;

Defined in: router-reaction-controller.ts:88

Called when the host is disconnected from the component tree. For custom element hosts, this corresponds to the disconnectedCallback() lifecycle, which is called the host or an ancestor component is disconnected from the document.

Returns

void

Implementation of

ReactiveController.hostDisconnected;