Portal

Définition

Permet de rendre un composant enfant dans un noeud DOM situe en dehors de la hiérarchie du parent. Les evenements remontent toujours dans l'arbre React.

Analogie

Comme un tunnel secret : le composant vit dans la maison React mais sort par une porte cachée dans un autre endroit du DOM.

Exemple de code

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

Cas d'usage

Modales, tooltips, menus déroulants qui doivent échapper au overflow:hidden du parent.

Anti-pattern

Termes liés