React Easy Modals

A simple, flexible, zero-dependency modal manager for React (port of svelte-modals).

📚 Documentation

Get started

Installation

1npm install react-easy-modals

Add ModalProvider to your app

Wrap your app with ModalProvider to enable modals:

1import { ModalProvider } from 'react-easy-modals'
2
3function App() {
4  return (
5    <ModalProvider>
6       {/* Your app content */}
7    </ModalProvider>
8  )
9}
10
11export default App

Create your Modal component

Create a basic modal component:

1function Modal({
2  title,
3  message,
4  close,
5  isOpen,
6}) {
7  if (!isOpen) return null;
8
9  return (
10    <div className="modal-backdrop">
11      <div className="modal">
12        <strong>{title}</strong>
13        <p>{message}</p>
14        <button onClick={() => close()}>OK</button>
15      </div>
16      <style jsx>{`
17        .modal-backdrop {
18          position: fixed;
19          z-index: 50;
20          inset: 0;
21          background: rgba(0, 0, 0, 0.5);
22          display: flex;
23          align-items: center;
24          justify-content: center;
25        }
26        .modal {
27          color: white;
28          background: black;
29          border: 1px solid gray;
30          padding: 20px;
31          display: flex;
32          flex-direction: column;
33          gap: 10px;
34          width: 300px;
35        }
36        .modal button {
37          background: white;
38          color: black;
39          padding: 5px;
40        }
41      `}</style>
42    </div>
43  );
44}

Try it out

Import useModals anywhere in your app to open or close your modals:

1import { useModals } from 'react-easy-modals'
2import Modal from './Modal'
3
4function Page() {
5  const modals = useModals()
6
7  const handleClick = () => {
8    modals.open(Modal, { 
9      title: "Alert", 
10      message: "This is an alert" 
11    })
12  }
13
14  return (
15    <button onClick={handleClick}>
16      Open Modal
17    </button>
18  )
19}