This commit is contained in:
Tomas Dvorak
2026-02-24 10:33:59 +01:00
parent 409acd2e08
commit 898a3c303f
1374 changed files with 290409 additions and 29187 deletions
+17
View File
@@ -0,0 +1,17 @@
{
"id": "221f8ebc8afdf56f8a35f054",
"source": "solid:signals",
"type": "github-document",
"title": "split-props",
"content": "---\ntitle: splitProps\nuse_cases: \u003e-\n prop forwarding, component composition, prop separation, child components,\n prop destructuring\ntags:\n - props\n - components\n - composition\n - destructuring\n - reactive\nversion: '1.0'\ndescription: \u003e-\n Split reactive props objects by keys in SolidJS. Perfect for consuming\n specific props while forwarding others to child components efficiently.\n---\n\n```ts\nimport { splitProps } from \"solid-js\"\n\nfunction splitProps\u003cT\u003e(\n\tprops: T,\n\t...keys: Array\u003c(keyof T)[]\u003e\n): [...parts: Partial\u003cT\u003e]\n\n```\n\nSplits a reactive object by keys.\n\nIt takes a reactive object and any number of arrays of keys; for each array of keys, it will return a reactive object with just those properties of the original object.\nThe last reactive object in the returned array will have any leftover properties of the original object.\n\nThis can be useful if you want to consume a subset of props and pass the rest to a child.\n\n```tsx\nfunction MyComponent(props) {\n\tconst [local, others] = splitProps(props, [\"children\"])\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv\u003e{local.children}\u003c/div\u003e\n\t\t\t\u003cChild {...others} /\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nBecause `splitProps` takes any number of arrays, we can split a props object as much as we wish (if, for example, we had multiple child components that each required a subset of the props).\n\nLet's say a component was passed six props:\n\n```tsx\n\u003cMyComponent a={1} b={2} c={3} d={4} e={5} foo=\"bar\" /\u003e\n// ...\n\nfunction MyComponent(props) {\n\tconsole.log(props) // {a: 1, b: 2, c: 3, d: 4, e: 5, foo: \"bar\"}\n\tconst [vowels, consonants, leftovers] = splitProps(\n\t\tprops,\n\t\t[\"a\", \"e\"],\n\t\t[\"b\", \"c\", \"d\"]\n\t)\n\tconsole.log(vowels) // {a: 1, e: 5}\n\tconsole.log(consonants) // {b: 2, c: 3, d: 4}\n\tconsole.log(leftovers.foo) // bar\n}\n```",
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/split-props.mdx",
"metadata": {
"path": "src/routes/reference/reactive-utilities/split-props.mdx",
"repo": "solidjs/solid-docs",
"repo_url": "https://github.com/solidjs/solid-docs.git",
"size": 1745,
"source_type": "github"
},
"hash": "942a519045e2ac57c42727d605a74dda300deab773fa258ee51ace7dcdc3c1e3",
"timestamp": "2026-02-23T11:43:00.190122684+01:00"
}