Slot pattern

2 snippets in React

REReact

Children Prop

syntax

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

example

function Card({ children, title }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </section>
  );
}

// Usage
<Card title="Profile">
  <p>This content is passed as children.</p>
</Card>

output

Renders a card wrapper around the paragraph.

Note children can be any renderable content: text, elements, arrays, or even functions (for render props).

Component Composition

RE · Components

syntax

function Parent() {
  return (
    <Layout>
      <Header />
      <Content />
      <Footer />
    </Layout>
  );
}

example

function PageLayout({ sidebar, content }) {
  return (
    <div className="layout">
      <aside>{sidebar}</aside>
      <main>{content}</main>
    </div>
  );
}

function Dashboard() {
  return (
    <PageLayout
      sidebar={<NavMenu />}
      content={<StatsPanel />}
    />
  );
}

Note Composition via props is preferred over inheritance. Passing components as props gives you flexible "slot" patterns without tightly coupling parent and child.