Components

<Dynamic>

<Dynamic> renders the value of its component prop as either a custom component or an intrinsic element.

Import

import { Dynamic } from "solid-js/web";

Type

type ValidComponent =
  | keyof JSX.IntrinsicElements
  | ((props: any) => JSX.Element);

type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
  [K in keyof P]: P[K];
} & {
  component: T | undefined;
};

function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;

Props

`component`

Type: T | undefined

Component or intrinsic element to render.

remaining props

Type: props accepted by the rendered component or element

Props forwarded to the rendered value of component.

Return value

Type: JSX.Element

Returns the rendered component or element.

Behavior

When component is undefined, nothing is rendered.

Example

import { createSignal } from "solid-js";

const views = {
  red: (props: { label: string }) => (
    <p style={{ color: "red" }}>{props.label}</p>
  ),
  blue: (props: { label: string }) => (
    <p style={{ color: "blue" }}>{props.label}</p>
  ),
};

function App() {
  const [selected, setSelected] = createSignal<keyof typeof views>("red");

  return (
    <>
      <button onClick={() => setSelected("red")}>Red</button>
      <button onClick={() => setSelected("blue")}>Blue</button>

      <Dynamic component={views[selected()]} label="Selected view" />
    </>
  );
}

createDynamic

Report an issue with this page