React compound components pattern for flexible UI composition

<p>I have a complex UI component (a card with header, body, footer, and actions) that is hard to reuse because the structure is too rigid. I want a flexible composition pattern that lets callers customize specific parts.</p>

<p>Compound components with React.createContext:</p> <div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">createContext</span><span class="p">,</span><span class="w"> </span><span class="nx">useContext</span><span class="p">,</span><span class="w"> </span><span class="nx">ReactNode</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'react'</span><span class="p">;</span> <span class="c1">// Context for the compound:</span> <span class="kd">interface</span><span class="w"> </span><span class="nx">CardContext</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">isSelected</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span> <span class="w"> </span><span class="nx">onSelect</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="ow">void</span><span class="p">;</span> <span class="p">}</span> <span class="kd">const</span><span class="w"> </span><span class="nx">CardCtx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createContext</span><span class="o">&lt;</span><span class="nx">CardContext</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">null</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span> <span class="c1">// Root component:</span> <span class="kd">function</span><span class="w"> </span><span class="nx">Card</span><span class="p">({</span><span class="w"> </span><span class="nx">children</span><span class="p">,</span><span class="w"> </span><span class="nx">isSelected</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w"> </span><span class="nx">onSelect</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{}</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">children</span><span class="o">:</span><span class="w"> </span><span class="kt">ReactNode</span><span class="p">;</span> <span class="w"> </span><span class="nx">isSelected?</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span> <span class="w"> </span><span class="nx">onSelect</span><span class="o">?:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="ow">void</span><span class="p">;</span> <span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">CardCtx</span><span class="p">.</span><span class="nx">Provider</span><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">isSelected</span><span class="p">,</span><span class="w"> </span><span class="nx">onSelect</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="sb">`card </span><span class="si">${</span><span class="nx">isSelected</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">'selected'</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">''</span><span class="si">}</span><span class="sb">`</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/CardCtx.Provider&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="c1">// Sub-components:</span> <span class="kd">function</span><span class="w"> </span><span class="nx">CardHeader</span><span class="p">({</span><span class="w"> </span><span class="nx">children</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">children</span><span class="o">:</span><span class="w"> </span><span class="kt">ReactNode</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">isSelected</span><span class="p">,</span><span class="w"> </span><span class="nx">onSelect</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useContext</span><span class="p">(</span><span class="nx">CardCtx</span><span class="p">)</span><span class="o">!</span><span class="p">;</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"card-header"</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">onSelect</span><span class="p">}</span><span class="o">&gt;</span> <span class="w"> </span><span class="p">{</span><span class="nx">isSelected</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="err">✓</span><span class="o">&lt;</span><span class="err">/span&gt;}</span> <span class="w"> </span><span class="p">{</span><span class="nx">children</span><span class="p">}</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span><span class="w"> </span><span class="nx">CardBody</span><span class="p">({</span><span class="w"> </span><span class="nx">children</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">children</span><span class="o">:</span><span class="w"> </span><span class="kt">ReactNode</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"card-body"</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span> <span class="p">}</span> <span class="kd">function</span><span class="w"> </span><span class="nx">CardActions</span><span class="p">({</span><span class="w"> </span><span class="nx">children</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">children</span><span class="o">:</span><span class="w"> </span><span class="kt">ReactNode</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">className</span><span class="o">=</span><span class="s2">"card-actions"</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span> <span class="p">}</span> <span class="c1">// Attach sub-components:</span> <span class="nx">Card</span><span class="p">.</span><span class="nx">Header</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">CardHeader</span><span class="p">;</span> <span class="nx">Card</span><span class="p">.</span><span class="nx">Body</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">CardBody</span><span class="p">;</span> <span class="nx">Card</span><span class="p">.</span><span class="nx">Actions</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">CardActions</span><span class="p">;</span> <span class="c1">// Usage -- callers control structure:</span> <span class="kd">function</span><span class="w"> </span><span class="nx">TraceCard</span><span class="p">({</span><span class="w"> </span><span class="nx">trace</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">trace</span><span class="o">:</span><span class="w"> </span><span class="kt">Trace</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">selected</span><span class="p">,</span><span class="w"> </span><span class="nx">setSelected</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="w"> </span><span class="nx">isSelected</span><span class="o">=</span><span class="p">{</span><span class="nx">selected</span><span class="p">}</span><span class="w"> </span><span class="nx">onSelect</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setSelected</span><span class="p">(</span><span class="o">!</span><span class="nx">selected</span><span class="p">)}</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="p">.</span><span class="nx">Header</span><span class="o">&gt;&lt;</span><span class="nx">h3</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">trace</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h3&gt;&lt;/Card.Header&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="p">.</span><span class="nx">Body</span><span class="o">&gt;&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">trace</span><span class="p">.</span><span class="nx">context_text</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/p&gt;&lt;/Card.Body&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="p">.</span><span class="nx">Actions</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">VoteButton</span><span class="w"> </span><span class="nx">traceId</span><span class="o">=</span><span class="p">{</span><span class="nx">trace</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/Card.Actions&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/Card&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <p>Key points: - Context shares state between compound components without prop drilling - Callers control which sub-components to render and in what order - Sub-components attached to parent (Card.Header) for discoverable API - Better than render props for complex multi-part components - Document required sub-components in TypeScript types or JSDoc</p>