react-use-slot

react-use-slot

Inspired by https://vuejs.org/guide/components/slots.html

Installation

$ npm install react-use-slot

Slot Content and Outlet

<FancyButton>
  Click me! <!-- slot content -->
</FancyButton>

const FancyButton = ({ children }) => {
  const Slot = useSlot(children);
  return (
    <button className="fancy-btn">
      <Slot />
    </button>
  );
}

The final rendered DOM

<button class="fancy-btn">
  Click me!
</button>

Frankly, you don't need to use react-use-slot for this purpose. You can write FancyButton component just like below.

const FancyButton = ({ children }) => {
  return (
    <button className="fancy-btn">
      {children}
    </button>
  );
}

Well.. How about next case?

Fallback Content

You can place the fallback content inside Slot tag

const SubmitButton = ({ children }) => {
  const Slot = useSlot(children);
  return (
    <button type="submit">
      <Slot>Submit</Slot>
    </button>
  );
}

When you use SubmitButton that has no content

<SubmitButton />

This will render the fallback content, "Submit".

<button type="submit">Submit</button>

Or use it with content

<SubmitButton>Save</SubmitButton>

it's rendered DOM

<button type="submit">Save</button>

Hmm... You don't need to use this package for this purpose either. You can write just like below. React is powerful enough.

const FancyButton = ({ children }) => {
  return (
    <button className="fancy-btn">
      {children ?? 'Save'}
    </button>
  );
}

Last. What about the following cases?

Named Slots

Finally, there are why you need react-use-slot from here.

<MyComponent>
  <div slot="header">HEADER</div>
  <p slot="footer">FOOTER</p>
  CONTENT
</MyComponent>

const MyComponent = ({ children }) => {
  const Slot = useSlot(children);

  return (
    <div className="my-component">
      <header>
        <Slot name="header" />
      </header>
      <main className="content">
        <Slot />
      </main>
      <footer>
        <Slot name="footer" />
      </header>
    </div>
  );
};

This will render below DOM

<div class="my-component">
  <header>
    <div>HEADER</div>
  </header>
  <main class="content">
    CONTENT
  </main>
  <footer>
    <p>FOOTER</p>
  </footer>
</div>

Scoped Slots

There are cases when the parent scope needs data provided from the child.

In this case, how to show the data with slot?

const List = () => {
  const Slot = useSlot();
  const dataList = ['foo', 'bar', 'baz'];

  return (
    <>
      <header><Slot name="header" /></header>
      <ul>
        {dataList.map((data) => <Slot name="item" />)}
      </ul>
    </>
  )
}

<List>
  <h1 slot="header">Title</h1>
  <li slot="item">How to show data??</li>
</List>

You can do it like below.

const List = () => {
  const Slot = useSlot();
  const dataList = ['foo', 'bar', 'baz'];

  return (
    <>
      <header><Slot name="header" /></header>
      <ul>
        {dataList.map((data) => (
          <Slot key={data} name="item" data={data} />)
        )}
      </ul>
    </>
  )
}

<List>
  <h1 slot="header">Title</h1>
  <li slot="item">{(data) => data}</li>
</List>

This will render below DOM

<header><h1>Title</h1></header>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

To avoid react warning with React.Fragment

Using the slot attribute with React.Fragment will cause a warning.

import React from 'react';

// Warning: Invalid prop `slot` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
<React.Fragment slot="foo">Foo</React.Fragment>

This warning doesn't affect the behavior, but if you want the warning not to be raised, import the Fragment from react-use-slot and use it.

import { Fragment } from 'react-use-slot';

<Fragment slot="foo">Foo</Fragment>