Slot & Fill component for merging React subtrees together.
WARNING This library is considered alpha and has not been released check out the demos and feel free to give me feedback star the repository and I'll get it released soon!
npm install react-slot-fill --save
Check out the examples locally
git clone https://github.com/camwest/react-slot-fill cd react-slot-fill npm start
Note These examples use React Fiber Alpha
import Slot Fill from 'react-slot-fill';const Toolbar = props<div><Slot ="Toolbar.Item" /></div>;Toolbar<Fill ="Toolbar.Item"><button> propslabel </button></Fill>
import Toolbar from './Toolbar';const Feature =<Toolbar.Item ="My Feature!" />;
import Toolbar from './Toolbar';import Feature from './Feature';import Provider from 'react-slot-fill';const App =<Provider><Toolbar /><Feature /></Provider>ReactDOMFiber;
Creates a Slot/Fill context. All Slot/Fill components must be descendants of Provider. You may only pass a single descendant to
getChildrenByName are really useful for testing Fill components.
See src/lib/__tests/Provider.test.tsx for an example.
Expose a global extension point
Render children into a Slot
You can add additional props to the Fill which can be accessed in the parent node of the slot via fillChildProps.