Slotted

Slotted is a react component that allows you to create a slotted layout with ease. It is inspired by the slot element in HTML. And tries to mimic the same behavior in react.

Installation

npm install slotted

Usage

import React from 'react';
import createSlots from 'slotted';

export default function SlottedLayout({ children }) {
  const Slot = createSlots(children);

  return (
    <div>
      <Slot name="header">
        <h1>Header</h1>
      </Slot>
      <Slot>
        <p>Default slot</p>
      </Slot>
      <Slot name="footer">
        <p>Footer</p>
      </Slot>
    </div>
  );
}

import React from 'react';
import SlottedLayout from './SlottedLayout';

export default function App() {
  return (
    <SlottedLayout>
      <div slot="header">Header content</div>
      <div>Default content</div>
      <div slot="footer">Footer content</div>
    </SlottedLayout>
  );
}