lit-ui-router / TransitionController

Class: TransitionController

Defined in: packages/lit-ui-router/src/transition-controller.ts:167

A zero-dependency Lit ReactiveController that keeps its host element synchronized with UI-Router transitions.

The controller registers TransitionService hooks (by default onSuccess) when the host connects and calls host.requestUpdate() whenever a matching transition event fires — no manual requestUpdate() plumbing, no leaked hooks. All registered hooks are deregistered in hostDisconnected(), so the controller is garbage-collection safe for elements that come and go from the DOM (including sticky routed components).

On (re)connect the controller also synchronizes once with the router's current state, so hosts render fresh data even when they connect after a transition has already completed.

Examples

Re-render on every successful transition

import { html, LitElement } from 'lit';
import { TransitionController } from 'lit-ui-router';

class NavHeader extends LitElement {
  private transitions = new TransitionController(this);

  render() {
    // Re-evaluated after every successful transition
    return html`Current state: ${this.transitions.current?.name}`;
  }
}

React to parameter changes on a specific state

import { LitElement } from 'lit';
import { TransitionController } from 'lit-ui-router';

class UserDetail extends LitElement {
  private transitions = new TransitionController(this, {
    criteria: { to: 'users.detail' },
    callback: () => this.loadUser(this.transitions.params.userId),
  });

  loadUser(userId: string) {
    // fetch and render the user
  }
}

With an explicit router instance

import type { ReactiveControllerHost } from 'lit';
import { TransitionController, type UIRouterLit } from 'lit-ui-router';

declare const host: ReactiveControllerHost & HTMLElement;
declare const router: UIRouterLit;

const controller = new TransitionController(host, { router });

Implements

• ReactiveController

Constructors

Constructor

new TransitionController(host, options?): TransitionController;

Defined in: packages/lit-ui-router/src/transition-controller.ts:181

Parameters

Parameter	Type
host	ReactiveControllerHost & Element
options?	TransitionControllerOptions

Returns

TransitionController

Accessors

current

Get Signature

get current(): 
  | StateDeclaration
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:212

The current StateDeclaration (globals.current).

Returns

| StateDeclaration | undefined

---

globals

Get Signature

get globals(): 
  | UIRouterGlobals
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:202

The router's UIRouterGlobals, if a router has been discovered.

Returns

| UIRouterGlobals | undefined

---

params

Get Signature

get params(): RawParams;

Defined in: packages/lit-ui-router/src/transition-controller.ts:207

The current parameter values (globals.params).

Returns

RawParams

---

router

Get Signature

get router(): 
  | UIRouter
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:197

The observed UIRouter instance.

undefined until provided via TransitionControllerOptions.router or discovered from an ancestor <ui-router> on connect.

Returns

| UIRouter | undefined

---

transition

Get Signature

get transition(): 
  | Transition
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:220

The most recent Transition observed by this controller (set by observed events and on host connect).

Returns

| Transition | undefined

Methods

includes()

includes(stateOrName, params?): boolean;

Defined in: packages/lit-ui-router/src/transition-controller.ts:230

Delegates to StateService.includes: is the state (or glob pattern, e.g. 'admin.**') included in the current active state?

Returns false when no router has been discovered.

Parameters

Parameter	Type
stateOrName	StateOrName
params?	RawParams

Returns

boolean