react-compound-components

---

name: react-compound-components description: React compound components pattern (safe, minimal context, ergonomic API) compatibility: opencode license: MIT metadata: stack: node-react-next style: solid-clean-code

What I do

Je fournis un guide pour implémenter des Compound Components sûrs :

• contexte minimal
• API ergonomique
• erreurs explicites

Minimal template

Copytype Ctx = { id: string };
const Ctx = createContext<Ctx | null>(null);

export function Root({ id, children }: { id: string; children: ReactNode }) {
  return <Ctx.Provider value={{ id }}>{children}</Ctx.Provider>;
}

Root.Label = function Label({ children }: { children: ReactNode }) {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error('Root.Label must be used within Root');
  return <label htmlFor={ctx.id}>{children}</label>;
};

When NOT to use

• Si l'état partagé devient complexe : passer à props explicites + hook.