mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
2.2 KiB
JSON
17 lines
2.2 KiB
JSON
{
|
|
"id": "32adf210b78c50886d413da8",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "dynamic",
|
|
"content": "---\ntitle: \u003cDynamic\u003e\norder: 5\nuse_cases: \u003e-\n dynamic components, conditional rendering, polymorphic components, runtime\n component selection, flexible ui, component switching\ntags:\n - dynamic\n - components\n - jsx\n - polymorphic\n - rendering\n - conditional\nversion: '1.0'\ndescription: \u003e-\n Render components dynamically at runtime with the Dynamic component. Perfect\n for polymorphic components and conditional component rendering.\n---\n\nThis component lets you insert an arbitrary Component or tag and passes the props through to it.\n\n```tsx\nimport { Dynamic } from \"solid-js/web\"\nimport type { JSX } from \"solid-js\"\n\nfunction Dynamic\u003cT\u003e(\n\tprops: T \u0026 {\n\t\tchildren?: any\n\t\tcomponent?: Component\u003cT\u003e | string | keyof JSX.IntrinsicElements\n\t}\n): () =\u003e JSX.Element\n```\n\nHere's an example of how you can use it:\n\n```tsx\n\u003cDynamic component={MyComponent} someProp={state.something} /\u003e\n```\n\n## Props\n\n| Name | Type | Description |\n| :---------- | :---------------------------------------------------------- | :---------------------------------------- |\n| `component` | `Component\u003cT\u003e` \\| `string` \\| `keyof JSX.IntrinsicElements` | The component to render. |\n| `children` | `any` | The children to pass to the component. |\n| `...` | `T` | Any other props to pass to the component. |",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/dynamic.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/components/dynamic.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 1510,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "4c234ef649a66d638dffb352ddf993cabf14553245b376ed2d18ee5e17c94744",
|
|
"timestamp": "2026-02-23T11:43:00.188935873+01:00"
|
|
} |