sos-nextjs/components/modal/modal.js

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom'
import {Icon} from '@rmwc/icon'
import FocusTrap from 'focus-trap-react'

import styles from './modal.module.css'

const PORTAL_ID = '__sos_modal';

export default function Modal({visible, title, children, onDeactivate}){
  const [portalExists, setPortalExists] = useState(false);

  useEffect(() => {
    const portalExists = !!document.querySelector(`#${PORTAL_ID}`);

    if (!portalExists) {
      const portal = document.createElement('div');
      portal.id = PORTAL_ID;
      document.body.appendChild(portal);
    }

    setPortalExists(true);
  }, []);

  if(!portalExists)
    return null

  return ReactDOM.createPortal((
    <div className={styles.modalContainer + (visible?' ' + styles.modalShown:'')}>
      <div className={styles.modalBackground} onClick={onDeactivate}/>
      {visible && (
        <FocusTrap active={visible} focusTrapOptions={{onDeactivate}}>
          <div className={styles.modalScroll}>
            <dialog open className={styles.modal}>
              <div className={styles.titleContainer}>
                <h2>{title}</h2>
                <button className="buttonLink" onClick={onDeactivate}>
                  <Icon icon="close"/>
                </button>

              </div>
              {children}
            </dialog>
          </div>
        </FocusTrap>
      )}
    </div>
  ), document.querySelector(`#${PORTAL_ID}`))
}