component-composition

What problem does it solve?

Designing reusable and flexible component APIs without prop drilling or tight coupling can be challenging. This Skill teaches effective composition patterns to create maintainable and adaptable React UIs.

Core Features & Use Cases

• Children Prop: The simplest form of composition for content containment.
• Compound Components: Build components that work together (e.g., Tabs, Accordion) using React Context for coordinated behavior.
• Render Props: Pass functions as children to provide custom rendering logic and share behavior.
• Composition over Props: Prefer slots and composition over complex configuration props for greater flexibility.
• Use Case: Refactor an existing Modal component to use compound components (Modal.Header, Modal.Body, Modal.Footer) for better flexibility and reusability, allowing consumers to define the modal's structure.

Quick Start

Refactor the Card component in src/components/Card.js to use the children prop for its main content, and separate header and footer props for optional slots.