🚀 React Slot and Fill pattern implementation made with React.createContext API. Check out the demo.
You can install this library via NPM or YARN.
npm i @blackbox-vision/react-slot-fill
yarn add @blackbox-vision/react-slot-fill
If 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.
This library is very similar to
react-slot-fill, but we solve two particular issues:
- Support for
React.createContext, this library is intended to use with React >= 16.3.1.
- If a
Fillis declared after a
Slot, it can render properly, which
The usage is really simple:
// Toolbar.js;;const Toolbar =<div><Slot name="Toolbar.Item" /></div>;;Toolbar<Fill name="Toolbar.Item"><button>propslabel</button></Fill>;
// Feature.js;;const Feature = <ToolbarItem label="My Feature!" />;
// App.js;;;;;const App =<Provider debug=true || false><Toolbar /><Feature /></Provider>;ReactDOM;
Fill components use the same props, which are the following ones:
|name||string||none||Determines the name of the Slot/Fill.|
|debug||boolean||false||Enable logging to detect issues with Slot/Fill.|
- Support for passing props from Fill to Slot.
- Support for multiple Fill for one Slot.
Please, open an issue following one of the issues templates. We will do our best to fix them.
If you want to contribute to this project see contributing for more information.
Distributed under the MIT license. See LICENSE for more information.