react-slot-fill ·


Slot & Fill component for merging React subtrees together.
Installation
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
Usage
Note These examples use React Fiber Alpha
Toolbar.js
import { Slot, Fill } from 'react-slot-fill';
const Toolbar = (props) =>
<div>
<Slot name="Toolbar.Item" />
</div>
export default Toolbar;
Toolbar.Item = (props) =>
<Fill name="Toolbar.Item">
<button>{ props.label }</button>
</Fill>
Feature.js
import Toolbar from './Toolbar';
const Feature = () =>
[
<Toolbar.Item label="My Feature!" />
];
App.js
import Toolbar from './Toolbar';
import Feature from './Feature';
import { Provider } from 'react-slot-fill';
const App = () =>
<Provider>
<Toolbar />
<Feature />
</Provider>
ReactDOMFiber.render(
<App />,
document.getElementById('root')
);
Components
Creates a Slot/Fill context. All Slot/Fill components must be descendants of Provider. You may only pass a single descendant to Provider
.
interface Provider {
getFillsByName(name: string): Fill[];
getChildrenByName(name: string): React.ReactChild[];
}
getFillsByName
and getChildrenByName
are really useful for testing Fill components.
See src/lib/__tests/Provider.test.tsx for an example.
Expose a global extension point
import { Slot } from 'react-slot-fill';
Props
interface Props {
name: string | Symbol;
fillChildProps?: {[key: string]: any}
children?: (fills) => JSX.Element
}
Render children into a Slot
import { Fill } from 'react-slot-fill';
Props
interface Props {
name: string | Symbol
children: JSX.Element | JSX.Element[]
}
You can add additional props to the Fill which can be accessed in the parent node of the slot via fillChildProps.