react-hook-use-slot

App.jsx

function createSlot() {
  const Slot = ({ children }) => children;
  const getSlot = (children) =>
    React.Children.toArray(children).find((child) => child.type === Slot) ||
    null;
  return [Slot, getSlot];
}

function createSlots(n) {
  const SlotSets = Array(n)
    .fill()
    .map(createSlot);
  const Slots = SlotSets.map(([Slot]) => Slot);
  const getRest = (children) =>
    React.Children.toArray(children).filter(
      (child) => !~Slots.indexOf(child.type)
    );
  return [...SlotSets, getRest];
}

console.log(createSlots(3));

const [SlotA, getSlotA] = createSlot();
const [SlotB, getSlotB] = createSlot();
const [SlotC, getSlotC] = createSlot();

// console.log(SlotA);

const Foo = ({ children }) => {
  return (
    <div>
      <div style={{ backgroundColor: 'lightblue' }}>
        <p>slot A</p>
        {getSlotA(children)}
      </div>
      <div style={{ backgroundColor: 'pink' }}>
        <p>slot B</p>
        {getSlotB(children)}
      </div>
      <div style={{ backgroundColor: 'green' }}>
        <p>slot C</p>
        {getSlotC(children)}
      </div>
    </div>
  );
};

Object.assign(Foo, { SlotA, SlotB, SlotC });

const [
   [SlotD, getSlotD],
   // [SlotE, getSlotE],
   // [SlotF, getSlotF],
   // getRest
] = createSlots(3);

// const Bar = ({ children }) => {
//   return (
//     <div>
//       <div style={{ backgroundColor: 'lightblue' }}>
//         <p>slot A</p>
//         {getSlotA(children)}
//       </div>
//       <div style={{ backgroundColor: 'pink' }}>
//         <p>slot B</p>
//         {getSlotB(children)}
//       </div>
//       <div style={{ backgroundColor: 'green' }}>
//         <p>slot C</p>
//         {getSlotC(children)}
//       </div>
//     </div>
//   );
// };

// Object.assign(Bar, { SlotD, SlotE, SlotF });

export default function App() {
  return (
    <div className="App">
      <Foo>
        <Foo.SlotA>this is slot A content</Foo.SlotA>
        <Foo.SlotB>this is slot B content</Foo.SlotB>
        <Foo.SlotC>this stuff goes in slot C</Foo.SlotC>
      </Foo>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

codeswing.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": []
}