lit-ui-router / UIViewInjectedProps

Interface: UIViewInjectedProps<T>

Defined in: packages/lit-ui-router/src/interface.ts:196

Props injected into routed components by the <ui-view> element.

These props provide access to the current transition, resolved data, and the router instance. Components can use these to access routing state and navigate programmatically.

Examples

Using in a template function

import { html } from 'lit';
import type { RoutedLitTemplate } from 'lit-ui-router';

const UserDetail: RoutedLitTemplate = (props) => {
  const { resolves, router } = props!;
  return html`
    <h1>User: ${resolves?.user?.name}</h1>
    <button @click=${() => router.stateService.go('users')}>
      Back to Users
    </button>
  `;
};

Using in a LitElement class

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

interface User {
  name: string;
}

class UserDetail extends LitElement {
  _uiViewProps?: UIViewInjectedProps<{ user: User }>;

  render() {
    const user = this._uiViewProps?.resolves?.user;
    return html`<h1>${user?.name}</h1>`;
  }
}

See

• UIRouter
• Transition

Type Parameters

Type Parameter	Default type	Description
T extends DefaultResolvesType	DefaultResolvesType	The shape of the resolved values object

Properties

Property	Type	Description	Defined in
resolves	T	Resolved data from state declarations; a NOWAIT resolve arrives as its promise	packages/lit-ui-router/src/interface.ts:202
router	UIRouter	The UIRouter instance for programmatic navigation	packages/lit-ui-router/src/interface.ts:204
transition?	Transition	The current transition (if one is in progress)	packages/lit-ui-router/src/interface.ts:200