Render Preact trees into other Preact trees, like portals.
preact-slots is available on npm:
npm install --save preact-slots
Define "holes" in your appliation using <Slot name="foo" />,
then fill them using <SlotContent slot="foo">some content</SlotContent>:
import { SlotProvider, Slot, SlotContent } from 'preact-slots'
render(
<SlotProvider>
<div>
<Slot name="foo">
Some Fallback Content
</Slot>
<SlotContent slot="foo">
Replacement Content
</SlotContent>
</div>
</SlotProvider>
)The above renders <div>Replacement Content</div>.
An extended example follows:
import { Slot, SlotContent, SlotProvider } from 'preact-slots'
const Header = () => (
<header class="header">
<Slot name="title">Slots Demo</Slot>
<Slot name="toolbar">
{ items => items && <nav>{items}</nav> }
</Slot>
</header>
)
const EditPage = ({ page, content, onSave, onCancel }) => (
<div class="page-editor">
<SlotContent slot="title">Editing {page}</SlotContent>
<SlotContent slot="toolbar">
<button onClick={onSave}>Save</button>
<button onClick={onCancel}>Cancel</button>
</SlotContent>
<textarea value={content} />
</div>
)
render(
<SlotProvider>
<div class="app">
<Header />
<EditPage />
</div>
</SlotProvider>
)Slots are a concept that has been around for a while.
In particular, @camwest's react-slot-fill is similar to preact-slots, but geared towards React.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent