lit-ui-router / RoutedLitTemplate

Type Alias: RoutedLitTemplate<T>

type RoutedLitTemplate<T> = (props) => TemplateResult;

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

A function that returns a Lit TemplateResult for rendering in a <ui-view>.

This is the simplest way to define route components - no LitElement class needed. The function optionally receives UIViewInjectedProps as its argument.

Type Parameters

Type Parameter	Default type
T extends DefaultResolvesType	DefaultResolvesType

Parameters

Parameter	Type
props	UIViewInjectedProps<T>

Returns

TemplateResult

Examples

Simple template (no props needed)

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

const HomeView: RoutedLitTemplate = () => html`<h1>Welcome Home</h1>`;

// Or inline in a state declaration:
const home: LitStateDeclaration = { name: 'home', url: '/', component: () => html`<h1>Home</h1>` };

With route parameters

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

const UserView: RoutedLitTemplate = (props) => html`
  <h1>User: ${props?.transition?.params().id}</h1>
`;

With resolved data (typed)

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

interface UserResolves { user: { name: string } }

const UserDetail: RoutedLitTemplate<UserResolves> = (props) => html`
  <h1>${props?.resolves?.user?.name}</h1>
`;