Compound Components — Design multi-part component APIs that share implicit state through context

// Compound component: Select with shared state
const SelectContext = createContext<{
  value: string;
  onChange: (value: string) => void;
} | null>(null);
 
function Select({ value, onChange, children }: {
  value: string;
  onChange: (value: string) => void;
  children: React.ReactNode;
}) {
  return (
    <SelectContext value={{ value, onChange }}>
      <div role="listbox">{children}</div>
    </SelectContext>
  );
}
 
function Option({ value, children }: { value: string; children: React.ReactNode }) {
  const ctx = use(SelectContext);
  if (!ctx) throw new Error("Option must be used within Select");
  const isSelected = ctx.value === value;
  return (
    <div
      role="option"
      aria-selected={isSelected}
      onClick={() => ctx.onChange(value)}
      className={isSelected ? "bg-blue-100 font-semibold" : ""}
    >
      {children}
    </div>
  );
}
 
Select.Option = Option;
 
// Usage — reads like a declarative API
<Select value={selected} onChange={setSelected}>
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="vue">Vue</Select.Option>
  <Select.Option value="svelte">Svelte</Select.Option>
</Select>

import { createContext, use, useState, useId, type ReactNode } from "react";
 
// --- Accordion compound component ---
 
interface AccordionContextValue {
  openItems: Set<string>;
  toggle: (id: string) => void;
  multiple: boolean;
}
 
const AccordionContext = createContext<AccordionContextValue | null>(null);
 
function useAccordion() {
  const ctx = use(AccordionContext);
  if (!ctx) throw new Error("Accordion sub-components must be used within <Accordion>");
  return ctx;
}
 
// Root
function Accordion({
  children,
  multiple = false,
  defaultOpen = [],
}: {
  children: ReactNode;
  multiple?: boolean;
  defaultOpen?: string[];
}) {
  const [openItems, setOpenItems] = useState<Set<string>>(
    () => new Set(defaultOpen)
  );
 
  const toggle = (id: string) => {
    setOpenItems((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        if (!multiple) next.clear();
        next.add(id);
      }
      return next;
    });
  };
 
  return (
    <AccordionContext value={{ openItems, toggle, multiple }}>
      <div className="divide-y border rounded-lg">{children}</div>
    </AccordionContext>
  );
}
 
// Item
interface ItemContextValue {
  itemId: string;
  isOpen: boolean;
}
 
const ItemContext = createContext<ItemContextValue | null>(null);
 
function Item({ id, children }: { id: string; children: ReactNode }) {
  const { openItems } = useAccordion();
  const isOpen = openItems.has(id);
 
  return (
    <ItemContext value={{ itemId: id, isOpen }}>
      <div>{children}</div>
    </ItemContext>
  );
}
 
function useItem() {
  const ctx = use(ItemContext);
  if (!ctx) throw new Error("Must be used within <Accordion.Item>");
  return ctx;
}
 
// Trigger
function Trigger({ children }: { children: ReactNode }) {
  const { toggle } = useAccordion();
  const { itemId, isOpen } = useItem();
  const contentId = `accordion-content-${itemId}`;
 
  return (
    <button
      className="w-full text-left p-4 flex justify-between items-center"
      onClick={() => toggle(itemId)}
      aria-expanded={isOpen}
      aria-controls={contentId}
    >
      {children}
      <span className={`transition-transform ${isOpen ? "rotate-180" : ""}`}>
        ▼
      </span>
    </button>
  );
}
 
// Content
function Content({ children }: { children: ReactNode }) {
  const { itemId, isOpen } = useItem();
  const contentId = `accordion-content-${itemId}`;
 
  if (!isOpen) return null;
 
  return (
    <div id={contentId} role="region" className="p-4 pt-0 text-gray-600">
      {children}
    </div>
  );
}
 
// Attach sub-components
Accordion.Item = Item;
Accordion.Trigger = Trigger;
Accordion.Content = Content;
 
// --- Usage ---
function FAQPage() {
  return (
    <Accordion defaultOpen={["general"]}>
      <Accordion.Item id="general">
        <Accordion.Trigger>What is React?</Accordion.Trigger>
        <Accordion.Content>
          React is a JavaScript library for building user interfaces.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item id="hooks">
        <Accordion.Trigger>What are hooks?</Accordion.Trigger>
        <Accordion.Content>
          Hooks let you use state and other React features in function components.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

// Context-based compound components work at any depth
<Accordion>
  <div className="custom-wrapper">
    {/* Works because Item reads context, not direct children */}
    <Accordion.Item id="nested">
      <Accordion.Trigger>Still works</Accordion.Trigger>
      <Accordion.Content>Context flows through any depth</Accordion.Content>
    </Accordion.Item>
  </div>
</Accordion>

function Accordion({
  openItems,
  onToggle,
  children,
}: {
  openItems: Set<string>;
  onToggle: (id: string) => void;
  children: ReactNode;
}) {
  return (
    <AccordionContext value={{ openItems, toggle: onToggle, multiple: true }}>
      <div>{children}</div>
    </AccordionContext>
  );
}