{
  "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"
}