RenderAsset

Render a component passed by reference, such as an icon or illustration, with optional props.

RenderAsset renders a component type supplied through the asset prop by calling React.createElement. Use it where a component reference is stored in data, such as a list of features with icons, and JSX cannot be written directly. It has no "use client" directive and no dependencies beyond React.

Inline editing

Access control

Shared folders

Import#

typescript

import { RenderAsset } from "@reactberry/system/blocks";

Usage#

typescript

import type { ComponentType } from "react";
import { RenderAsset } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";
import { IconPencil } from "@reactberry/system/icons";

type Feature = { title: string; icon: ComponentType<any> };

const feature: Feature = { title: "Inline editing", icon: IconPencil };

export default function FeatureItem() {
  return (
    <Box display="flex" alignItems="center" gap="s">
      <RenderAsset asset={feature.icon} assetProps={{ width: 20, height: 20 }} />
      <Text>{feature.title}</Text>
    </Box>
  );
}

Examples#

Component chosen at runtime#

Look up the component from a map keyed by state, and pass it as asset.

Payment received

API#

RenderAsset#

Prop	Type	Default	Description
`asset*`	`ComponentType<any>`	—	Component to render.
`assetProps`	`Record<string, unknown>`	`{}`	Props passed to `asset`.

No other props are accepted.

Notes#

If asset is falsy, a "RenderAsset: No asset provided" warning is logged with console.warn and nothing is rendered.
Children are always passed as null, so a children key in assetProps is ignored.