Compound Components Pattern with Context Sharing

1import React, { createContext, useContext, useState } from 'react';
2
3// 1. Context for top-level state
4interface AccordionContextValue {
5  activeId: string | null;
6  toggle: (id: string) => void;
7}
8const AccordionContext = createContext<AccordionContextValue | null>(null);
9
10function useAccordion() {
11  const ctx = useContext(AccordionContext);
12  if (!ctx) throw new Error('Accordion compound subcomponents must be used within <Accordion>');
13  return ctx;
14}
15
16// 2. Item Context for scoped identity
17const ItemContext = createContext<string | null>(null);
18function useAccordionItem() {
19  const id = useContext(ItemContext);
20  if (!id) throw new Error('Accordion.Header and Panel must be used within <Accordion.Item>');
21  return id;
22}
23
24// 3. Root Component
25export function Accordion({ children }: { children: React.ReactNode }) {
26  const [activeId, setActiveId] = useState<string | null>(null);
27  const toggle = (id: string) => setActiveId((prev) => (prev === id ? null : id));
28
29  return (
30    <AccordionContext.Provider value={{ activeId, toggle }}>
31      <div className="accordion-root">{children}</div>
32    </AccordionContext.Provider>
33  );
34}
35
36// 4. Subcomponents
37Accordion.Item = function AccordionItem({ id, children }: { id: string; children: React.ReactNode }) {
38  return (
39    <ItemContext.Provider value={id}>
40      <div className="accordion-item">{children}</div>
41    </ItemContext.Provider>
42  );
43};
44
45Accordion.Header = function AccordionHeader({ children }: { children: React.ReactNode }) {
46  const { activeId, toggle } = useAccordion();
47  const id = useAccordionItem();
48  const isOpen = activeId === id;
49
50  return (
51    <button
52      onClick={() => toggle(id)}
53      aria-expanded={isOpen}
54      className="accordion-header"
55    >
56      {children}
57      <span>{isOpen ? '▲' : '▼'}</span>
58    </button>
59  );
60};
61
62Accordion.Panel = function AccordionPanel({ children }: { children: React.ReactNode }) {
63  const { activeId } = useAccordion();
64  const id = useAccordionItem();
65  if (activeId !== id) return null;
66
67  return <div className="accordion-panel">{children}</div>;
68};