{"id":17513049,"url":"https://github.com/blackboxvision/react-slot-fill","last_synced_at":"2025-07-02T07:05:49.792Z","repository":{"id":34304444,"uuid":"146455603","full_name":"BlackBoxVision/react-slot-fill","owner":"BlackBoxVision","description":"🎉 Slot and Fill implementation for React 16. Portals on Steroids 💪","archived":false,"fork":false,"pushed_at":"2022-12-08T17:39:54.000Z","size":5562,"stargazers_count":12,"open_issues_count":15,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-01T23:40:40.170Z","etag":null,"topics":["context","fill","library","provider","react","slot"],"latest_commit_sha":null,"homepage":"https://BlackBoxVision.github.io/react-slot-fill/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlackBoxVision.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-28T13:57:13.000Z","updated_at":"2025-03-04T05:51:32.000Z","dependencies_parsed_at":"2023-01-15T06:10:02.939Z","dependency_job_id":null,"html_url":"https://github.com/BlackBoxVision/react-slot-fill","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/BlackBoxVision/react-slot-fill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-slot-fill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-slot-fill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-slot-fill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-slot-fill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBoxVision","download_url":"https://codeload.github.com/BlackBoxVision/react-slot-fill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-slot-fill/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263091028,"owners_count":23412343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["context","fill","library","provider","react","slot"],"created_at":"2024-10-20T06:07:01.482Z","updated_at":"2025-07-02T07:05:49.758Z","avatar_url":"https://github.com/BlackBoxVision.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Slot and Fill [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Freact-slot-fill.svg)](https://badge.fury.io/js/%40blackbox-vision%2Freact-slot-fill) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/react-slot-fill/badge.svg)](https://snyk.io/test/github/blackboxvision/react-slot-fill)\n\n:rocket: React Slot and Fill pattern implementation made with React.createContext API. Check out the [demo](https://blackboxvision.github.io/react-slot-fill/).\n\n## Install\n\nYou can install this library via NPM or YARN.\n\n### NPM\n\n```bash\nnpm i @blackbox-vision/react-slot-fill\n```\n\n### YARN\n\n```bash\nyarn add @blackbox-vision/react-slot-fill\n```\n\n## Use case\n\nIf you need to render a component from somepart of the DOM tree, but it needs to be visible in another part of the tree, this library solves it.\n\nThis library is very similar to [`react-slot-fill`](https://github.com/camwest/react-slot-fill), but we solve two particular issues:\n\n- Support for `React.createContext`, this library is intended to use with React \u003e= 16.3.1.\n- If a `Fill` is declared after a `Slot`, it can render properly, which [`react-slot-fill`](https://github.com/camwest/react-slot-fill) doesn't support.\n\n## Usage\n\nThe usage is really simple:\n\n```javascript\n// Toolbar.js\nimport React from 'react';\nimport { Slot, Fill } from '@blackbox-vision/react-slot-fill';\n\nconst Toolbar = (props) =\u003e (\n  \u003cdiv\u003e\n    \u003cSlot name=\"Toolbar.Item\" /\u003e\n  \u003c/div\u003e\n);\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\n```javascript\n// Feature.js\nimport React from 'react';\nimport Toolbar from './Toolbar';\n\nconst Feature = () =\u003e \u003cToolbar.Item label=\"My Feature!\" /\u003e;\n```\n\n```javascript\n// App.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from '@blackbox-vision/react-slot-fill';\n\nimport Toolbar from './Toolbar';\nimport Feature from './Feature';\n\nconst App = () =\u003e (\n  \u003cProvider debug={true || false}\u003e\n    \u003cToolbar /\u003e\n    \u003cFeature /\u003e\n  \u003c/Provider\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n## Props\n\n`Slot` and `Fill` components use the same props, which are the following ones:\n\n| Properties | Types   | Default Value | Description                                     |\n| ---------- | ------- | ------------- | ----------------------------------------------- |\n| name       | string  | none          | Determines the name of the Slot/Fill.           |\n| debug      | boolean | false         | Enable logging to detect issues with Slot/Fill. |\n\n## TODO\n\n- [x] Support for passing props from Fill to Slot.\n- [ ] Support for multiple Fill for one Slot.\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/react-slot-fill/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-slot-fill/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-slot-fill/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Freact-slot-fill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackboxvision%2Freact-slot-fill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Freact-slot-fill/lists"}