text: /* eslint-disable react/prop-types */
  import React, {
    useContext, useRef, useState, useEffect,
  } from 'react';
  import ReactDOM from 'react-dom';
  import './Modal.css';
  
  const ModalContext = React.createContext();
  
  export function ModalProvider({ children }) {
    const modalRef = useRef();
    const [value, setValue] = useState();
  
    useEffect(() => {
      setValue(modalRef.current);
    }, []);
    return (
      <>
        <ModalContext.Provider value={value}>
          {children}
        </ModalContext.Provider>
        <div ref={modalRef} />
      </>
    );
  }
  
  export function Modal({ onClose, children }) {
    const modalNode = useContext(ModalContext);
    const handleEsc = (e) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    if (!modalNode) return null;
    return ReactDOM.createPortal(
      <div id="modal">
        <div id="modal-background" aria-label="Close" role="button" tabIndex={0} onClick={onClose} onKeyPress={handleEsc} />
        <div id="modal-content">
          {children}
        </div>
      </div>,
      modalNode,
    );
  }
  