React Easy Modals

https://react-easy-modals-docs.vercel.app/docs/getting-started
Admin
React Easy Modals is a library that simplifies creating and managing modal dialogs in React...
Tokens:578
Snippets:4
Trust Score:7.8
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install React Easy Modals

Source: https://react-easy-modals-docs.vercel.app/docs/getting-started/index

Installs the react-easy-modals library using npm. This is the first step to integrating modal functionality into your React application.

```bash
npm install react-easy-modals
```

--------------------------------

### Open a Modal Using useModals Hook

Source: https://react-easy-modals-docs.vercel.app/docs/getting-started/index

Demonstrates how to use the `useModals` hook to open a custom modal component from any part of your application. It shows how to pass props to the modal and trigger its opening via a button click.

```javascript
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>
  )
}
```

--------------------------------

### Create a Custom Modal Component

Source: https://react-easy-modals-docs.vercel.app/docs/getting-started/index

Defines a reusable modal component that accepts props like title, message, and a close function. This component will be rendered when a modal is opened.

```javascript
function Modal({
  title,
  message,
  close,
  isOpen,
}: ModalProps & {
  title: string;
  message: string;
}) {
  if (!isOpen) return null;

  return (
    <div className="modal-backdrop">
      <div className="modal">
        <strong>{title}</strong>
        <p>{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>
  );
}
```

--------------------------------

### Provide Modals Context with ModalProvider

Source: https://react-easy-modals-docs.vercel.app/docs/getting-started/index

Wraps the root of your React application with `ModalProvider` to enable the use of modals throughout the app. This component sets up the necessary context for modal management.

```javascript
import { ModalProvider } from 'react-easy-modals'

function App() {
  return (
    <ModalProvider>
       {/* Your app content */}
    </ModalProvider>
  )
}

export default App
```
Tokens:
Raw