compound-pattern

Name: compound-pattern
Availability: InStock
Author: hallinna

Implement React compound components with shared Context state and static sub-components.

Updated Mar 12, 2026

Search Tags:#react #component patterns #compound components #prop drilling #context api #ui state

Ready to run

npx skills add https://github.com/Hallinna/interveiw-study-2026 --skill compound-pattern-hallinna

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: compound-pattern
Source: https://github.com/Hallinna/interveiw-study-2026/tree/main/.agents/skills/compound-pattern
Command: npx skills add https://github.com/Hallinna/interveiw-study-2026 --skill compound-pattern-hallinna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The compound component pattern solves the problem of building related UI components (like toggles and lists) that must share implicit state without forcing consumers to manually pass props through multiple layers.

Core Features & Use Cases

Shared implicit state via Context: Use React Context to coordinate open/close or selection state across parent and child components.
Ergonomic component API with static properties: Attach sub-components as properties on the parent (e.g., Parent.Toggle, Parent.List) so consumers import only the parent.
More flexible nesting than direct cloning-only approaches: Prefer Context-based coordination to enable nested or wrapped compositions without losing access to state.

Quick Start

Use the compound component pattern in React by creating a parent component that holds the shared state in a Context provider and exposing coordinated sub-components as static properties (for example, Parent.Toggle and Parent.List) for a dropdown, tabs, accordion, or menu UI.

Frequently Asked Questions about compound-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I share state between React components without prop drilling?▼

To share React component state without prop drilling, use the compound component pattern. It coordinates implicit open or selected state across related UI sub-components via React Context, eliminating the need to manually pass props through multiple layers.

What is the compound component pattern in React?▼

The compound component pattern is a React architecture approach where a root component holds shared UI state in Context and exposes coordinated sub-components as static properties. This allows related elements like toggles and lists to interact without explicit prop passing.

How do I build a React dropdown or tabs menu with coordinated open state?▼

Build coordinated React UI assemblies like dropdowns or tabs by implementing the compound component pattern. Create a parent component to manage shared open or selected state through Context, then expose child components as static properties for ergonomic nesting.

Can I wrap or nest components inside a React compound component without losing state?▼

Yes, React compound components using Context-based coordination support flexible nested compositions. Unlike direct cloning-only approaches, Context allows you to wrap or nest child components without losing access to the shared implicit state.

Does the compound component pattern require external React libraries?▼

No, the compound component pattern requires no external libraries. It is implemented purely with React Context and static component properties, making it a native solution for coordinating shared UI state without adding dependencies.