Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna.
The Problem with Props
Vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
// Too many props
<Card
title="Hello"
subtitle="World"
icon={<Icon />}
footer={<Footer />}
headerAction={<Button />}
/>Compound Components
Maecenas sed diam eget risus varius blandit sit amet non magna.
Implementation
Nullam id dolor id nibh ultricies vehicula ut id elit.
function Card({ children }) {
return <div className="card">{children}</div>;
}
Card.Header = function CardHeader({ children }) {
return <div className="card-header">{children}</div>;
};
Card.Body = function CardBody({ children }) {
return <div className="card-body">{children}</div>;
};Usage
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>Content</Card.Body>
</Card>Benefits
Lorem ipsum dolor sit amet.
- Flexible API
- Clear hierarchy
- Easy to extend
Conclusion
Donec ullamcorper nulla non metus auctor fringilla.