React Academy · Lesson

Named Slots via Object Props

Implement header/body/footer slots by passing JSX through named props.

Named Slots via Object Props is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will implement flexible named slots by passing JSX through named props, enabling layout components with header, body, and footer regions without a rigid children structure.

The Limitation of children

A single `children` prop works for one region. When a component needs multiple independent content regions (like a card with a header and a footer), named props carrying JSX are the clean solution.

Named Prop Slots

Define a prop for each slot in the component's interface. The parent passes JSX to each prop. The component renders each slot in the right position.

function Card({ header, body, footer }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{body}</div>
      <div className="card-footer">{footer}</div>
    </div>
  );
}

// Usage
<Card
  header={<h2>Title</h2>}
  body={<p>Content here</p>}
  footer={<button>OK</button>}
/>

Optional Slots

Make slots optional by only rendering them when the prop is truthy. This lets the same component work with or without a footer, for example.

function Card({ header, children, footer }) {
  return (
    <div>
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

Mixing children and Named Slots

Use `children` for the primary content region and named props for secondary regions. This follows the principle that the most common use case should be the most ergonomic.

<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript: Typing Named Slots

Type named slot props as `React.ReactNode` to accept any JSX content.

interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

Named Slots vs Compound Components

Named props are simple and explicit. Compound components (like ``) are more ergonomic for complex component families but require more setup with Context. Start with named props and migrate if needed.

Passing Components as Slots

You can also type a slot as a React component (not JSX). The parent passes a component reference, and the layout renders it. This gives the layout control over when and how many times to render the slot.

function Timeline({ renderItem, items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

<Timeline
  items={data}
  renderItem={item => <EventCard event={item} />}
/>

Layout Composition with Named Slots

Page layout components use named slots extensively. A page shell component with `sidebar`, `toolbar`, and `content` slots lets different pages compose the same shell with completely different content in each region.

Documenting Named Slots

Named slots are self-documenting through TypeScript interfaces or PropTypes. Consumers can see exactly which slots are available and which are optional, reducing the need for external documentation.

Quick Check

What TypeScript type should you use for a named slot prop that accepts any JSX?

Recap

Named slot props make layout components flexible and self-documenting. Use children for the main region, named props for secondary regions, and type them as React.ReactNode.

Up Next

Next lesson: **Cloning & Injecting Props with cloneElement** — you will use React.cloneElement to pass hidden props from a parent to its children.

Frequently asked questions

Is the “Named Slots via Object Props” lesson free?

Yes — the full text of “Named Slots via Object Props” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Named Slots via Object Props”?

Implement header/body/footer slots by passing JSX through named props. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Named Slots via Object Props” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

props.children Fundamentals
React.Children Utilities
Named Slots via Object Props
Cloning & Injecting Props with cloneElement

← Back to React Academy