A basic React Modal Portal

ModalPortal.jsx

// Import dynamically without SSR, as this is expected to be rendered clientside only
// e.g.  const ModalPortal = dynamic(() => import('~/shared/components/ModalPortal'), { ssr: false });
//
// Expects an empty div with id of `modal-portal-root` somewhere in the DOM

import React, { useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';

function ModalPortal({ children }) {
  const $modalPortalRoot = useRef();
  const $el = useRef(document.createElement('div'));

  useEffect(() => {
    $modalPortalRoot.current = document.getElementById('modal-portal-root');
    $modalPortalRoot.current.appendChild($el.current);
    return () => $modalPortalRoot.current.removeChild($el.current);
  }, []);

  const modalElement = (
    <div className="modal-portal">
      {children}
    </div>
  );

  return createPortal(
    children && modalElement,
    $el.current,
  );
}

export default ModalPortal;