{"id":13850425,"url":"https://github.com/camwest/react-slot-fill","last_synced_at":"2026-01-18T14:15:15.628Z","repository":{"id":40002938,"uuid":"84240700","full_name":"camwest/react-slot-fill","owner":"camwest","description":"Slot \u0026 Fill component for merging React subtrees together. Portal on steroids.","archived":false,"fork":false,"pushed_at":"2021-12-01T19:03:25.000Z","size":3313,"stargazers_count":661,"open_issues_count":9,"forks_count":27,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-12-02T11:07:59.010Z","etag":null,"topics":["extensibility","framework","javascript","react"],"latest_commit_sha":null,"homepage":"https://camwest.github.io/react-slot-fill/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/camwest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-07T20:01:46.000Z","updated_at":"2025-09-23T08:05:29.000Z","dependencies_parsed_at":"2022-06-26T07:06:26.791Z","dependency_job_id":null,"html_url":"https://github.com/camwest/react-slot-fill","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/camwest/react-slot-fill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwest%2Freact-slot-fill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwest%2Freact-slot-fill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwest%2Freact-slot-fill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwest%2Freact-slot-fill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camwest","download_url":"https://codeload.github.com/camwest/react-slot-fill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwest%2Freact-slot-fill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28537492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T13:04:05.990Z","status":"ssl_error","status_checked_at":"2026-01-18T13:01:44.092Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extensibility","framework","javascript","react"],"created_at":"2024-08-04T20:01:11.837Z","updated_at":"2026-01-18T14:15:15.596Z","avatar_url":"https://github.com/camwest.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-slot-fill \u0026middot; [![CircleCI Status](https://circleci.com/gh/camwest/react-slot-fill.svg?style=shield\u0026circle-token=:circle-token)](https://circleci.com/gh/camwest/react-slot-fill) [![Codacy Badge](https://api.codacy.com/project/badge/Coverage/e7c3e47817fc4a81baca16cdb9a78ac1)](https://www.codacy.com/app/cameron_4/react-slot-fill?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=camwest/react-slot-fill\u0026utm_campaign=Badge_Coverage) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)\n\n\n\n![Image](images/slot-fill-logo.png)\n\nSlot \u0026 Fill component for merging React subtrees together.\n\n## Check out the [simple demo on glitch](https://rsf-demo.glitch.me/) ([view source](https://glitch.com/edit/#!/project/rsf-demo))\n\n## Installation\n\n```\nnpm install react-slot-fill --save\n```\n\n### Check out the examples locally\n\n```\ngit clone https://github.com/camwest/react-slot-fill\ncd react-slot-fill\nnpm start\n```\n\n## Usage\n\n**Note** These examples use React Fiber Alpha\n\n### Toolbar.js\n\n```jsx\nimport { Slot, Fill } from 'react-slot-fill';\n\nconst Toolbar = (props) =\u003e\n  \u003cdiv\u003e\n    \u003cSlot name=\"Toolbar.Item\" /\u003e\n  \u003c/div\u003e\n\nexport default Toolbar;\n\nToolbar.Item = (props) =\u003e\n  \u003cFill name=\"Toolbar.Item\"\u003e\n    \u003cbutton\u003e{ props.label }\u003c/button\u003e\n  \u003c/Fill\u003e\n```\n\n### Feature.js\n\n```jsx\nimport Toolbar from './Toolbar';\n\nconst Feature = () =\u003e\n  [\n    \u003cToolbar.Item label=\"My Feature!\" /\u003e\n  ];\n```\n\n### App.js\n\n```jsx\nimport Toolbar from './Toolbar';\nimport Feature from './Feature';\n\nimport { Provider } from 'react-slot-fill';\n\nconst App = () =\u003e\n  \u003cProvider\u003e\n    \u003cToolbar /\u003e\n    \u003cFeature /\u003e\n  \u003c/Provider\u003e\n\nReactDOMFiber.render(\n  \u003cApp /\u003e,\n  document.getElementById('root')\n);\n```\n\n## Components\n\n### \u003cProvider\u003e\n\nCreates a Slot/Fill context. All Slot/Fill components must be descendants of Provider. You may only pass a single descendant to `Provider`.\n\n```typescript\ninterface Provider {\n  /**\n   * Returns instances of Fill react components\n   */\n  getFillsByName(name: string): Fill[];\n  /**\n   * Return React elements that were inside Fills\n   */\n  getChildrenByName(name: string): React.ReactChild[];\n}\n```\n\n`getFillsByName` and `getChildrenByName` are really useful for testing Fill components.\nSee [src/lib/__tests/Provider.test.tsx](src/lib/__tests/Provider.test.tsx) for an example.\n\n### \u003cSlot\u003e\n\nExpose a global extension point\n\n```javascript\nimport { Slot } from 'react-slot-fill';\n```\n\n#### Props\n\n```typescript\ninterface Props {\n  /**\n   * The name of the component. Use a symbol if you want to be 100% sue the Slot\n   * will only be filled by a component you create\n   */\n  name: string | Symbol;\n\n  /**\n   * Props to be applied to the child Element of every fill which has the same name.\n   *\n   *  If the value is a function, it must have the following signature:\n   *    (target: Fill, fills: Fill[]) =\u003e void;\n   *\n   *  This allows you to access props on the fill which invoked the function\n   *  by using target.props.something()\n   */\n  fillChildProps?: {[key: string]: any}\n\n  /**\n   * A an optional function which gets all of the current fills for this slot\n   * Allows sorting, or filtering before rendering. An example use-case could\n   * be to only show a limited amount of fills.\n   *\n   * By default Slot injects an unstyled `\u003cdiv\u003e` element. If you want greater\n   * control over presentation use this function.\n   *\n   * @example\n   * \u003cSlot name=\"My.Slot\"\u003e\n   * {(items) =\u003e \u003cComponent\u003e{items}\u003c/Component\u003e}\n   * \u003c/Slot\u003e\n   */\n  children?: (fills) =\u003e JSX.Element\n}\n```\n\n### \u003cFill\u003e\n\nRender children into a Slot\n\n```javascript\nimport { Fill } from 'react-slot-fill';\n```\n\n#### Props\n\n```typescript\ninterface Props {\n  /**\n   * The name of the slot that this fill should be related to.\n   */\n  name: string | Symbol\n\n  /**\n   * one or more JSX.Elements which will be rendered\n   */\n  children: JSX.Element | JSX.Element[]\n}\n```\n\nYou can add additional props to the Fill which can be accessed in the parent node of the slot via fillChildProps.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamwest%2Freact-slot-fill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamwest%2Freact-slot-fill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamwest%2Freact-slot-fill/lists"}