Dynamic component example (@roku-sdk/solid)

This example demonstrates the Dynamic component exported by @roku-sdk/solid.

The Dynamic component lets you render a runtime-selected target reactively. You can use it for the following:

• Route and page management
• Pluggable screen compositions
• Dynamic intrinsic node creation

Benefits of using the Dynamic component for routing

With Dynamic, you can map each route name to a component, and the selected component renders directly. Without Dynamic, route rendering can grow into large Switch and Match trees.

Tier 1: function component Dynamic

You can use this tier when your runtime value is a function component:

import { Dynamic, type Component } from "@roku-sdk/solid";

type PageProps = { data: string };
const PAGE_MAP: Record<string, Component<PageProps>> = {
    home: HomePage,
    settings: SettingsPage,
    about: AboutPage
};

<Dynamic component={PAGE_MAP[currentPageName()]} data={routeData()} />;

In this example app, Select swaps between HomePage, SettingsPage, and AboutPage by changing the key used to index PAGE_MAP, while Left and Right update the props passed to the rendered page without swapping the component.

Tier 2: SceneGraph intrinsic string Dynamic

You can use this tier when your runtime value is a SceneGraph intrinsic tag name ("group", "label", "rectangle", and so on):

import { Dynamic } from "@roku-sdk/solid";

const [nodeType, setNodeType] = createSignal<"rectangle" | "label">("rectangle");

<Dynamic component={nodeType()} /* intrinsic props */ />;

In this example app, Select toggles between intrinsic "rectangle" and "label" rendering, while Left and Right update the props passed to the rendered intrinsic node.

📘

Important

Strings like "home" and "settings" are application route IDs; they are not SceneGraph intrinsic tags.

The following code is incorrect:

JSX

// "home" is not an intrinsic SceneGraph node type
<Dynamic component={currentRouteName()} />

You should use a registry map from route IDs to real function components:

JSX

// Route ID to function component
const PAGE_MAP: Record<string, Component<PageProps>> = {
    home: HomePage,
    settings: SettingsPage,
    about: AboutPage
};

<Dynamic component={PAGE_MAP[currentRouteName()]} data={routeData()} />;

Running the example

To run this example, use these commands:

pnpm install
npx rk dev

You can use these remote control keys in the app:

• Up and Down: Switch the active demo section
• Select: Swap the active Dynamic target (the tier 1 page components home, settings, and about, or the tier 2 intrinsic node types rectangle and label)
• Left and Right: Update the props passed to the active Dynamic target without swapping it