createDynamic

Function form of Dynamic, for code that is not JSX: renders what component() returns (a component, a tag name or a falsy value) with props, and follows it when it changes.

Function form of Dynamic, for code that is not JSX: renders what component() returns (a component, a tag name or a falsy value) with props, and follows it when it changes.

Import#

import { createDynamic } from "@shadow-js/web";

Signature#

function createDynamic<C extends DynamicTarget>(
  component: () => C,
  props: object = {},
): () => unknown

Parameters#

Name	Description
`component`	Accessor of the target.
`props`	The props of what it renders (reactive getters stay reactive).

Returns#

An accessor of the rendered output.

Examples#

import { createRoot, useSignal } from "@shadow-js/core";
import { createDynamic, insert } from "@shadow-js/web";

const parent = document.createElement("div");
createRoot(() => {
  const [level] = useSignal(1);
  insert(parent, createDynamic(() => (level() === 1 ? "h1" : "h2"), { children: "Title" }));
});