React Slot Pattern

Slot-based children organization for React.

Component

useSlot hook is a selector for named slots.

withSlot wrapper function generates Slot component for base component.

constCard: React.FC=({ children })=>{constHeaderTemplate=useSlot({
children,name: "Header",fallback: <>Card header is not found!</>,});constBodyTemplate=useSlot({
children,name: "Body",fallback: <>Card body is not found!</>,});return(<divclassName="card"><divclassName="card__header"><HeaderTemplate/></div><divclassName="card__body"><BodyTemplate/></div></div>);};exportdefaultwithSlot(Card);

Usage

<Card><Card.Slotname="Header"><h1>Card Header</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></Card.Slot><Card.Slotname="Body"><p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repellendus officia saepe porro blanditiis laboriosam debitis
corrupti, vero consequatur cumque adipisci itaque distinctio sint
dolorum repudiandae aspernatur nihil iure optio minima?
</p></Card.Slot></Card>