Cas d'usage : Modales, tooltips, popovers

Quand la sortie du flux DOM est nécessaire

La fonctionnalité des Portails React, permettant de rendre un composant dans un noeud DOM différent de son parent logique dans l'arbre React, n'est pas une technique à utiliser systématiquement. Elle trouve son utilité dans des scénarios spécifiques où les contraintes visuelles imposées par la hiérarchie DOM et le CSS rendent difficile, voire impossible, d'obtenir le comportement souhaité.

Les cas d'usage les plus fréquents et les plus pertinents pour l'utilisation des Portails concernent généralement des éléments d'interface utilisateur qui doivent apparaître "par-dessus" le reste du contenu de la page, indépendamment de leur point d'origine dans l'application.

Boîtes de dialogue modales (Modals)

C'est sans doute le cas d'usage le plus emblématique des portails. Une boîte de dialogue modale est conçue pour interrompre le flux de travail de l'utilisateur, attirer son attention sur une information ou une action spécifique, et souvent désactiver l'interaction avec le reste de la page en arrière-plan (souvent via un fond semi-transparent ou "backdrop").

Pour garantir qu'elle s'affiche correctement au-dessus de tout le reste et qu'elle n'est pas coupée ou affectée par les styles (overflow, z-index) des composants qui l'ont déclenchée, il est idéal de rendre le DOM de la modale directement dans un conteneur de haut niveau, comme document.body ou un

Infobulles (Tooltips)

Les tooltips sont de petites fenêtres d'information qui apparaissent généralement au survol ou au focus d'un élément spécifique pour fournir une aide contextuelle ou des détails supplémentaires.

Souvent, l'élément déclencheur de la tooltip peut se trouver à l'intérieur d'un conteneur ayant des limites définies (par exemple, une cellule de tableau, un panneau avec overflow: hidden). Si la tooltip était rendue comme un enfant DOM direct de cet élément, elle pourrait être coupée ou cachée par les limites du parent.

En utilisant un portail, le composant Tooltip peut être logiquement lié à son élément déclencheur dans React (pour recevoir les informations à afficher et gérer son état de visibilité), mais son rendu DOM peut être attaché au document.body. Cela permet à la tooltip de se positionner librement par rapport à l'élément déclencheur, même si celui-ci est dans un conteneur restreint, et de s'afficher correctement par-dessus les autres éléments.

Menus déroulants, Popovers, et notifications flottantes

Des composants similaires comme les menus déroulants contextuels (dropdowns), les popovers (conteneurs d'informations plus riches qu'une tooltip, souvent déclenchés par un clic), ou les notifications flottantes (toasts) qui apparaissent temporairement dans un coin de l'écran, bénéficient tous de la même logique.

Ces éléments doivent généralement s'afficher au-dessus du flux normal du contenu et ne pas être contraints par les styles `overflow` ou `z-index` de leurs composants parents logiques dans l'arbre React. Les rendre via un portail dans un conteneur de haut niveau est la solution la plus robuste pour garantir leur bon positionnement et leur visibilité.

Par exemple, un composant `DropdownMenu` peut être déclenché par un bouton situé dans une barre d'outils complexe. En utilisant un portail, le menu lui-même peut être rendu directement dans le `body`, assurant qu'il ne sera pas coupé par les limites de la barre d'outils et qu'il s'affichera correctement au-dessus des éléments adjacents.

De même, un système de notifications peut avoir un composant `NotificationManager` quelque part dans l'arbre React, mais utiliser un portail pour rendre les notifications individuelles (toasts) dans un conteneur fixe positionné en haut à droite de l'écran, indépendamment de l'endroit où la notification a été déclenchée dans l'application.

Conclusion : Résoudre les conflits de contexte d'empilement

En résumé, les Portails React sont particulièrement utiles pour tous les composants qui doivent briser les contraintes de la hiérarchie DOM parente, principalement pour des raisons de style CSS liées au positionnement, à l'overflow, ou au contexte d'empilement (z-index).

Les modales, tooltips, popovers, menus déroulants, et notifications flottantes sont les exemples les plus classiques où l'utilisation de `ReactDOM.createPortal` apporte une solution élégante et fiable, en garantissant que ces éléments peuvent s'afficher correctement par-dessus le reste de l'interface tout en restant logiquement connectés à leur origine dans l'arbre React.