React Modal Dialog

A concise yet comprehensive modal dialog implementation in React.

Installation

npm install react-modal-dialog-kit

Usage

Wrap your application with the ModalProvider and provide a reference to a container element for the modals:

import { ModalProvider, useModal } from "react-modal-dialog-kit";

function App() {
  const refModalContainer = useRef<HTMLDivElement>(null);

  return (
    <>
      <ModalProvider refModalContainer={refModalContainer}>
        <AppContent />
      </ModalProvider>
      <div
        ref={refModalContainer}
        style={{ zIndex: 0, position: "relative" }}
      />
    </>
  );
}

Create a modal component using the useModal hook:

import styles from "./styles.module.css";

type ModalProps = {
  isOpen: boolean;
  onCloseRequest: (reason: string) => void;
  children: React.ReactNode;
};

export function Modal({ isOpen, onCloseRequest, children }: ModalProps) {
  const { contextValue } = useModal({ isOpen, onCloseRequest });

  const { modalId, modalOrder } = contextValue;

  return (
    <ModalContext.Provider value={contextValue}>
      <ModalPortal>
        <div
          id={modalId}
          style={
            {
              "--modal-z-index": modalOrder.indexOf(modalId) + 1,
            } as React.CSSProperties
          }
        >
          {isOpen && (
            <div className={styles.modalWrapper}>
              <div className={styles.modalWindow}>
                {children}
                <div>
                  <button onClick={() => onCloseRequest?.("close-button")}>
                    Close
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </ModalPortal>
    </ModalContext.Provider>
  );
}

/* styles.module.css */
.modalWrapper {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: flex-start;
  z-index: var(--modal-z-index);
  background-color: rgba(0, 0, 0, 0.32);
  padding: 0.5rem;
  overflow: auto;
}

.modalWindow {
  position: relative;
  box-sizing: border-box;
  margin: 3rem auto 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  background: white;
  padding: 1rem;
  max-width: 100%;
}

Use the modal in your application:

export function AppContent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>Open modal</button>
      <MyModal
        isOpen={isModalOpen}
        onCloseRequest={() => setIsModalOpen(false)}
      >
        Hello, MyModal!
      </MyModal>
    </>
  );
}