mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"id": "a6b7c716bbebfc5093686458",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "switch-and-match",
|
|
"content": "---\ntitle: \u003cSwitch\u003e / \u003cMatch\u003e\norder: 5\nuse_cases: \u003e-\n multiple conditions, routing, complex branching, state machines, multi-way\n decisions, replacing if-else chains\ntags:\n - conditional\n - routing\n - control-flow\n - components\n - branching\n - switch\nversion: '1.0'\ndescription: \u003e-\n Handle multiple exclusive conditions in SolidJS with Switch and Match. Clean\n alternative to if-else chains for complex conditional rendering.\n---\n\nUseful for when there are more than 2 mutual exclusive conditions. It is a more flexible version of the if-else-if-else-if-else-... chain.\n\n```ts\nimport { Switch, Match } from \"solid-js\"\nimport type { MatchProps, JSX } from \"solid-js\"\n\nfunction Switch(props: {\n\tfallback?: JSX.Element\n\tchildren: JSX.Element\n}): () =\u003e JSX.Element\n\ntype MatchProps\u003cT\u003e = {\n\twhen: T | undefined | null | false\n\tchildren: JSX.Element | ((item: T) =\u003e JSX.Element)\n}\nfunction Match\u003cT\u003e(props: MatchProps\u003cT\u003e)\n```\n\nA super simple implementation of this component would be:\n\n```tsx\nfunction Switch(props) {\n\tlet children = props.children\n\n\tif (!Array.isArray(children)) children = [children]\n\n\tfor (let i = 0; i \u003c children.length; i++) {\n\t\tconst child = children[i]\n\t\tif (child.props.when) return child\n\t}\n\n\treturn props.fallback\n}\n```\n\nFor example, it can be used to perform basic routing:\n\n```tsx\n\u003cSwitch fallback={\u003cdiv\u003eNot Found\u003c/div\u003e}\u003e\n\t\u003cMatch when={state.route === \"home\"}\u003e\n\t\t\u003cHome /\u003e\n\t\u003c/Match\u003e\n\t\u003cMatch when={state.route === \"settings\"}\u003e\n\t\t\u003cSettings /\u003e\n\t\u003c/Match\u003e\n\u003c/Switch\u003e\n```\n\nMatch also supports function children to serve as keyed flow.\n\n## Props\n\n### Switch\n\n| Name | Type | Default | Description |\n| ---------- | ------------- | ----------- | -------------------------------------------------------------------------------- |\n| `fallback` | `JSX.Element` | `undefined` | The fallback element to render if no `Match` component has a truthy `when` prop. |\n\n### Match\n\n| Name | Type | Default | Description |\n| ------ | --------------------------------- | ----------- | ------------------------------------------------------------------------- |\n| `when` | `T \\| undefined \\| null \\| false` | `undefined` | The condition to check. If it is truthy, the `children` will be rendered. |",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/switch-and-match.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/components/switch-and-match.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2389,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "e2c9f7f0bbe78e7aa839f71dbc24c8a0335dd2ceadf23dfb25c2fcf39f455f1d",
|
|
"timestamp": "2026-02-23T11:43:00.189241287+01:00"
|
|
} |