rgjs-preact-slots

Getting started

npm install rgjs-preact-slots

Usage

Reusable components

Toolbar.js:

import { SlotProvider, Slot, SlotContent } from 'rgjs-preact-slots';

const Toolbar = ({ children }) => (
  <div class="toolbar">
    <SlotProvider>
      <div class="icon"><Slot name="icon" /></div>
      <div class="title"><Slot name="title" /></div>
      {children}
    </SlotProvider>
  </div>
);

Toolbar.Slot = SlotContent;

export Toolbar;

Page.js

import { Toolbar } from './Toolbar.js';

const Page = () => (
  <>
    <Toolbar>
      <Toolbar.Slot slot="icon"><img src="path/to/image.jpg" /></Toolbar.Slot>
      <Toolbar.Slot slot="title">Title</Toolbar.Slot>
    </Toolbar>

    <div>Lorem ispum</div>
  </>
);

Output:

<div class="toolbar">
  <div class="icon"><img src="path/to/image.jpg" /></div>
  <div class="title">Title</div>
</div>

<div>Lorem ispum</div>

Good to know

Default slot

Create a Slot element without a name to create a default slot:

<Slot name="with-name" />
<Slot />

Any SlotContent elements that do not target a specific slot will end up there:

<SlontContent slot="with-name">Targets the 'with-name' slot</SlontContent>
<SlontContent>This will end up in the default slot</SlontContent>

Contribute

File a bug and I'll try to help.

License

MIT © REJH Gadellaa

Heavily inspired by the preact-slots library.