Compound Components

React 🟡 Mid

Definition

Pattern ou un composant parent partage son etat implicitement avec ses enfants via Context, offrant une API declarative et flexible.

Analogie

Comme un menu deroulant HTML <select>/<option> : les options savent qu'elles font partie du select sans configuration explicite.

Exemple de code

// Utilisation declarative
<Tabs>
  <Tabs.List>
    <Tabs.Tab>Profil</Tabs.Tab>
    <Tabs.Tab>Settings</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Contenu profil</Tabs.Panel>
    <Tabs.Panel>Contenu settings</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Cas d'usage

Composants UI complexes (tabs, accordeons, menus) necessitant une API flexible et composable.

Anti-pattern

Utiliser ce pattern pour des composants simples ou une prop suffirait.

Termes lies

#patterns#interview#design