Getting Started

npm install react-easy-modals

import { ModalProvider } from 'react-easy-modals'
 
function App() {
  return (
    <ModalProvider>
       {/* Your app content */}
    </ModalProvider>
  )
}
 
export default App

function Modal({
  data,
  close,
  isOpen,
}: ModalProps & {
  data: {
    title: string;
    message: string;
  };
}) {
  if (!isOpen) return null;
 
  return (
    <div className="modal-backdrop">
      <div className="modal">
        <strong>{data.title}</strong>
        <p>{data.message}</p>
        <button onClick={() => close()}>OK</button>
      </div>
      <style jsx>{`
        .modal-backdrop {
          position: fixed;
          z-index: 50;
          inset: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .modal {
          color: white;
          background: black;
          border: 1px solid gray;
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 300px;
        }
        .modal button {
          background: white;
          color: black;
          padding: 5px;
        }
      `}</style>
    </div>
  );
}

import { useModals } from 'react-easy-modals'
import Modal from './Modal'
 
function Page() {
  const modals = useModals()
 
  const handleClick = () => {
    modals.open(Modal, { 
      title: "Alert", 
      message: "This is an alert" 
    })
  }
 
  return (
    <button onClick={handleClick}>
      Open Modal
    </button>
  )
}