React Design Pattern: Compound Components

Ce design pattern est assez simple à mettre en place: on a un component parent qui a des components enfants et ils sont reliés par un context.

Ce qu'on voit généralement en production, c'est un component parent avec des enfants à qui on passe des props.
Ici, l'approche est différente, c'est un component qui est découpé en plusieurs options:

<PreviewModal>
  <PreviewModal.Player />
  <PreviewModal.Info />
  <PreviewModal.Episode />
</PreviewModal>

Dans notre exemple, on a notre component PreviewModal qui mets à disposition plusieurs options : le player, les infos, les épisodes.
Mais ces options font partie uniquement de la previewModal, parce que ils sont fortement liée par un context.

Inplémentation:

Step 1: Création du context

const ModalContext = React.createContext(defaultContext);

Pour l'exemple, j'ai mis en place la forme la plus basique du context, pas de provider value.

Step 2: Création du component parent

const PreviewModal = ({ children }) => {
  return (
    <>
      <p>Preview Modal like Netflix</p>
      {children}
    </>
  );
};

Step 3: Connexion des enfants avec le parent

const { episodes } = useContext(ModalContext);

Bonus:

PreviewModal.Player = Player;
PreviewModal.Info = Info;
PreviewModal.Episode = Episode;

La petite astuce, PreviewModal est un objet js donc on peut lui faire stocker les components.
Je trouve qu'écrire le code de cette manière ça permet de mieux comprendre que la component parents à des "options"