React Slots are a pattern for component composition that allows you to pass components or JSX as children and control how they are rendered in different parts of a component. This pattern is inspired by “slots” in frameworks like Vue.js or Web Components.
React Slots is often implemented by leveraging React context or child filtering to create named slots (Title, Body, Footer) that a parent component like Card can recognize and render correctly. Here’s how you can achieve this:
Implementing React Slots
// Define the Card component and its slots
const Card = ({ children }) => {
// Filter out specific child components based on their type
const title = React.Children.toArray(children).find(child => child.type === Title);
const body = React.Children.toArray(children).find(child => child.type === Body);
const footer = React.Children.toArray(children).find(child => child.type === Footer);
return (
<div className="card">
<div className="card-title">{title}div>
<div className="card-body">{body}div>
<div className="card-footer">{footer}div>
div>
);
};
// Slot components
const Title = ({ children }) => <h2>{children}h2>;
const Body = ({ children }) => <p>{children}p>;
const Footer = ({ children }) => <footer>{children}footer>;
// Usage
const App = () => {
return (
<Card>
<Title>What is React?Title>
<Body>
Learn React.
Body>
<Footer>
<button>Get startedbutton>
Footer>
Card>
);
};
Explanation
-
CardComponent:- Collects
childrenand filters them based on each child’stypeproperty. - Identifies specific slots (
Title,Body,Footer) by comparing the child’stypewith the predefined slot components.
- Collects
-
Slot Components:
-
Title,Body, andFooteract as placeholders. - They are simple components that render their children directly but provide semantic meaning to the
Cardcomponent.
-
-
Usage:
- The child components (
Title,Body,Footer) are slots inside theCard, enabling clear and declarative composition.
- The child components (
Output HTML
The above setup renders the following HTML:
class="card">
class="card-title">What is React? 
