### Contribution Guide: Setup and Linking

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Steps to clone the repository, install dependencies, link the local library, and start development servers for both the main library and examples.

```bash
# 1. Clone repo
git clone https://github.com/eBay/nice-modal-react.git

# 2. Install deps
cd nice-modal-react
yarn

# 3. Make local repo as linked
yarn link

# 4. Start dev server
yarn dev

# 5. Install examples deps
cd example
yarn

# 6. Use local linked lib
yarn link @ebay/nice-modal-react

# 7. Start examples dev server
yarn start
```

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

### Install NiceModal React

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Install the NiceModal React library using either yarn or npm.

```bash
# with yarn
yarn add @ebay/nice-modal-react

# or with npm
npm install @ebay/nice-modal-react
```

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

### Create a Modal Component with NiceModal.create

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Create a modal component by wrapping a standard React component with NiceModal.create. This example uses Ant Design's Modal component. The modal is uncontrolled and can be hidden from within the component itself. Use `modal.remove()` to clean up the component from the tree.

```jsx
import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

export default NiceModal.create(({ name }: { name: string }) => {
  // Use a hook to manage the modal state
  const modal = useModal();
  return (
    <Modal
      title="Hello Antd"
      onOk={() => modal.hide()}
      visible={modal.visible}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      Hello {name}!
    </Modal>
  );
});
```

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

### Overriding Helper Properties

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Illustrates how to override properties provided by UI helper functions. The example shows overriding the `onOk` property for an Ant Design modal.

```jsx
const handleSubmit = () => {
  doSubmit().then(() => {
    modal.hide();
  });
}
<Modal {...antdModal(modal)} onOk={handleSubmit}>
```

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

### Declarative Context Access in Modals

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Shows how to use the declarative approach to access component tree context within a modal. This example uses Ant Design's Button and Modal components.

```jsx
export default function AntdSample() {
  return (
    <>
      <Button type="primary" onClick={() => NiceModal.show('my-antd-modal', { name: 'Nate' })}>
        Show Modal
      </Button>
      <MyAntdModal id="my-antd-modal" {...otherProps} />
    </>
  );
}
```

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

### React Bootstrap Dialog Helper

Source: https://context7.com/ebay/nice-modal-react/llms.txt

The `bootstrapDialog` helper binds modal state and callbacks to React Bootstrap's `<Modal>` component. Ensure `react-bootstrap` is installed and configured.

```tsx
import BootstrapModal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';

const MyBootstrapDialog = NiceModal.create(({ message }: { message: string }) => {
  const modal = useModal();
  return (
    <BootstrapModal {...bootstrapDialog(modal)}>
      <BootstrapModal.Header closeButton>
        <BootstrapModal.Title>Confirmation</BootstrapModal.Title>
      </BootstrapModal.Header>
      <BootstrapModal.Body>
        <p>{message}</p>
      </BootstrapModal.Body>
      <BootstrapModal.Footer>
        <Button variant="secondary" onClick={modal.hide}>Cancel</Button>
        <Button variant="primary" onClick={() => { modal.resolve(true); modal.hide(); }}>
          Confirm
        </Button>
      </BootstrapModal.Footer>
    </BootstrapModal>
  );
});

NiceModal.show(MyBootstrapDialog, { message: 'Are you sure you want to delete?' })
  .then((confirmed) => confirmed && performDelete());
```

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

### Testing Nice Modals with Testing Library

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Provides a basic test case for nice modals using `@testing-library/react`. It demonstrates rendering the provider, showing a modal, and asserting its visibility.

```jsx
import NiceModal from '@ebay/nice-modal-react';
import { render, act, screen } from '@testing-library/react';
import { MyNiceModal } from '../MyNiceModal';

test('My nice modal works!', () => {
  render(<NiceModal.Provider />
  
  act(() => {
    NiceModal.show(MyNiceModal);
  });
  
  expect(screen.getByRole('dialog')).toBeVisible();
});
```

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

### Basic Modal State Management

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Demonstrates binding modal visibility and actions to a modal handler. Use this pattern for manual state management of modals.

```jsx
//...\nconst modal = useModal();
return (
  <Modal
    visible={modal.visible}
    title="Hello Antd"
    onOk={() => modal.hide()}
    onCancel={() => modal.hide()}
    afterClose={() => modal.remove()}
  >
    Hello NiceModal!
  </Modal>
);
//...
```

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

### show Method

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/interfaces/NiceModalHandler.html

Displays the modal. This method changes the 'visible' state to true and accepts optional arguments to pass as props to the modal component.

```APIDOC
## show Method

### Description
Shows the modal, changing its `visible` state to true. Accepts optional arguments to be passed as props to the modal component.

### Signature
`show(args?: Props): Promise<unknown>`

### Parameters
#### Optional args: Props
An object passed to the modal component as props.

### Returns
A Promise that resolves with an unknown value. This promise typically resolves when the modal is closed or a result is returned.
```

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

### NiceModal.create

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use NiceModal.create as a higher-order component to wrap your existing modal/dialog components. It integrates them with NiceModal, handling visibility and mounting/unmounting.

```APIDOC
## NiceModal.create — Wrap a modal component to integrate with NiceModal

`NiceModal.create` is a higher-order component that wraps your existing modal/dialog component. It ensures the component is not rendered at all while invisible, handles the `defaultVisible` and `keepMounted` props, and provides the modal's ID via context so that `useModal()` (with no arguments) works inside it.

```jsx
import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

// Ant Design modal — receives custom props (name) plus the modal handler via useModal()
const MyAntdModal = NiceModal.create(({ name }: { name: string }) => {
  const modal = useModal();
  return (
    <Modal
      title="Hello NiceModal"
      visible={modal.visible}
      onOk={() => modal.hide()}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      Hello {name}!
    </Modal>
  );
});

// Material UI modal — no custom props needed
const MyMuiDialog = NiceModal.create(() => {
  const modal = useModal();
  return (
    <Dialog
      open={modal.visible}
      onClose={() => modal.hide()}
      TransitionProps={{ onExited: () => modal.remove() }}
    >
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogContent>Are you sure?</DialogContent>
      <DialogActions>
        <Button onClick={() => modal.hide()}>Cancel</Button>
        <Button onClick={() => modal.hide()}>OK</Button>
      </DialogActions>
    </Dialog>
  );
});
```
```

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

### show

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/interfaces/NiceModalHandler.html

Shows the modal and returns a promise that resolves or rejects based on the modal's outcome.

```APIDOC
## show

### Description
Shows the modal. This method returns a Promise that will be resolved by the `resolve` method or rejected by the `reject` method when the modal interaction is complete.

### Method
`show(): Promise<unknown>`

### Returns
`Promise<unknown>` - A promise that resolves with data from the modal or rejects if the modal is cancelled or encounters an error.
```

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

### Show Modal by Component Instance

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Use NiceModal.show with a component reference to display a modal. Arguments passed as the second argument will be forwarded as props to the modal component.

```js
import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

function App() {
  const showAntdModal = () => {
    // Show a modal with arguments passed to the component as props
    NiceModal.show(MyAntdModal, { name: 'Nate' })
  };
  return (
    <div className="app">
      <h1>Nice Modal Examples</h1>
      <div className="demo-buttons">
        <button onClick={showAntdModal}>Antd Modal</button>
      </div>
    </div>
  );
}
```

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

### show

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Displays a modal, either by providing the component directly or by its registered ID.

```APIDOC
## show

### Description
Displays a modal. This function can be used in two ways: by passing a React functional component directly, or by passing the string ID of a previously registered modal. It returns a Promise that resolves with the result of the modal interaction.

### Type parameters

#### T
- **T**: unknown - The type of the value resolved by the Promise when the modal is closed.
#### C
- **C**: unknown - The type of the props for the modal component when passed directly.
#### P
- **P**: Partial<C & { children?: ReactNode }> - The type of the arguments passed to the modal when using a component.

### Parameters

#### modal
- **modal** (React.FC<C>) - The React functional component to display as a modal.
#### args
- **args** (P) - Optional. Arguments to be passed to the modal component.

### Returns
- **Promise<T>** - A Promise that resolves with the return value of the modal.
```

```APIDOC
## show

### Description
Displays a modal identified by its string ID. It returns a Promise that resolves with the result of the modal interaction.

### Type parameters

#### T
- **T**: unknown - The type of the value resolved by the Promise when the modal is closed.

### Parameters

#### modal
- **modal** (string) - The unique identifier of the registered modal to display.
#### args
- **args** (Record<string, unknown>) - Optional. Arguments to be passed to the modal.

### Returns
- **Promise<T>** - A Promise that resolves with the return value of the modal.
```

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

### NiceModal.show

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Imperatively show a modal from anywhere in your application using NiceModal.show. It accepts a component reference or a registered string ID and returns a Promise for promise-based interactions.

```APIDOC
## NiceModal.show — Imperatively show a modal from anywhere

`NiceModal.show` displays a modal by passing either the component reference or a registered string ID. It returns a `Promise` that resolves when `modal.resolve()` is called inside the modal, enabling promise-based data flow from modal back to caller.

```jsx
import NiceModal from '@ebay/nice-modal-react';
import UserInfoModal from './UserInfoModal';

// Show by component reference — no prior registration needed
function UserList() {
  const handleNewUser = () => {
    NiceModal.show(UserInfoModal)
      .then((newUser) => {
        console.log('New user created:', newUser);
        // { id: '1234567890', name: 'Alice', job: 'Engineer' }
      })
      .catch((err) => {
        console.error('Modal rejected:', err.message);
      });
  };

  const handleEditUser = (user) => {
    NiceModal.show(UserInfoModal, { user })
      .then((updatedUser) => {
        console.log('User updated:', updatedUser);
      });
  };

  return (
    <div>
      <button onClick={handleNewUser}>+ New User</button>
      <button onClick={() => handleEditUser({ id: '1', name: 'Bob', job: 'Designer' })}>
        Edit User
      </button>
    </div>
  );
}

// Show by registered string ID
NiceModal.register('confirm-dialog', ConfirmDialog);

function SomeComponent() {
  const handleDelete = () => {
    NiceModal.show('confirm-dialog', { message: 'Delete this item?' })
      .then(() => deleteItem())
      .catch(() => console.log('Cancelled'));
  };
  return <button onClick={handleDelete}>Delete</button>;
}
```
```

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

### show

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Shows a modal, either by providing the component directly or by its registered ID, and returns a promise that resolves with the modal's return value.

```APIDOC
## show

### Description
Shows a modal, either by providing the component directly or by its registered ID, and returns a promise that resolves with the modal's return value.

### Method
`show<T, C, P>(modal: React.FC<C>, args?: P): Promise<T>`

### Type Parameters
- **T**: The type of the value the modal will resolve with.
- **C**: The type of the component's props.
- **P**: The type of the arguments passed to the modal, extending `Partial<C & { children?: ReactNode }> `.

### Parameters
#### Path Parameters
- **modal** (React.FC<C>) - The modal component to show.
- **args** (P) - Optional. Arguments to pass to the modal.

### Returns
- `Promise<T>`: A promise that resolves with the return value of the shown modal.

---

### Method
`show<T>(modal: string, args?: Record<string, unknown>): Promise<T>`

### Type Parameters
- **T**: The type of the value the modal will resolve with.

### Parameters
#### Path Parameters
- **modal** (string) - The ID of the modal to show.
- **args** (Record<string, unknown>) - Optional. Arguments to pass to the modal.

### Returns
- `Promise<T>`: A promise that resolves with the return value of the shown modal.

---

### Method
`show<T, P>(modal: string, args: P): Promise<T>`

### Type Parameters
- **T**: The type of the value the modal will resolve with.
- **P**: The type of the arguments passed to the modal.

### Parameters
#### Path Parameters
- **modal** (string) - The ID of the modal to show.
- **args** (P) - Arguments to pass to the modal.

### Returns
- `Promise<T>`: A promise that resolves with the return value of the shown modal.
```

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

### UI Library Helper Integrations

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Shows how to use helper functions from nice-modal-react to integrate with Material UI, Ant Design, and Bootstrap React components. These helpers simplify binding modal actions.

```jsx
import NiceModal, {
  muiDialog,
  muiDialogV5,
  antdModal,
  antdModalV5,
  antdDrawer,
  antdDrawerV5,
  bootstrapDialog
} from '@ebay/nice-modal-react';

//...
const modal = useModal();
// For MUI
<Dialog {...muiDialog(modal)}>

// For MUI V5
<Dialog {...muiDialogV5(modal)}>

// For ant.design
<Modal {...antdModal(modal)}>

// For ant.design v4.23.0 or later
<Modal {...antdModalV5(modal)}>

// For antd drawer
<Drawer {...antdDrawer(modal)}>

// For antd drawer v4.23.0 or later
<Drawer {...antdDrawerV5(modal)}>

// For bootstrap dialog
<Dialog {...bootstrapDialog(modal)}>
```

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

### NiceModalStore Interface

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/interfaces/NiceModalStore.html

The NiceModalStore is an indexable interface where each key (string) maps to a NiceModalState.

```APIDOC
## Interface NiceModalStore

### Description
This interface represents a store for managing modal states. It allows access to individual modal states using string keys.

### Indexable
```typescript
[key: string]: NiceModalState;
```

### Related Types
- [NiceModalState](NiceModalState.html)
```

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

### Embed Application with NiceModal.Provider

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Wrap your entire application with NiceModal.Provider to enable global state management for modals using React context.

```js
import NiceModal from '@ebay/nice-modal-react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <NiceModal.Provider>
      <App />
    </NiceModal.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

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

### muiDialog

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Material-UI's Dialog component with nice-modal-react.

```APIDOC
## muiDialog

### Description
Adapter to use Material-UI's Dialog component with nice-modal-react.

### Signature
`muiDialog(modal: NiceModalHandler): { open: boolean; onClose: any; onExited: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### Integrate Modals with NiceModal.create

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use NiceModal.create to wrap your existing modal components. This higher-order component ensures modals are not rendered while invisible, handles visibility props, and provides modal ID context.

```jsx
import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

// Ant Design modal — receives custom props (name) plus the modal handler via useModal()
const MyAntdModal = NiceModal.create(({ name }: { name: string }) => {
  const modal = useModal();
  return (
    <Modal
      title="Hello NiceModal"
      visible={modal.visible}
      onOk={() => modal.hide()}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      Hello {name}!
    </Modal>
  );
});

// Material UI modal — no custom props needed
const MyMuiDialog = NiceModal.create(() => {
  const modal = useModal();
  return (
    <Dialog
      open={modal.visible}
      onClose={() => modal.hide()}
      TransitionProps={{ onExited: () => modal.remove() }}
    >
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogContent>Are you sure?</DialogContent>
      <DialogActions>
        <Button onClick={() => modal.hide()}>Cancel</Button>
        <Button onClick={() => modal.hide()}>OK</Button>
      </DialogActions>
    </Dialog>
  );
});
```

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

### muiDialogV5

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Material-UI's Dialog component (v5+) with nice-modal-react.

```APIDOC
## muiDialogV5

### Description
Adapter to use Material-UI's Dialog component (v5+) with nice-modal-react.

### Signature
`muiDialogV5(modal: NiceModalHandler): { open: boolean; onClose: any; onExited: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### Integrate Ant Design v5 Drawer with NiceModal

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use the `antdDrawerV5` helper for Ant Design v5+ `<Drawer>` components, which uses the `open` and `afterOpenChange` props.

```tsx
import { Drawer } from 'antd';
import NiceModal, { useModal, antdDrawerV5 } from '@ebay/nice-modal-react';

// Ant Design v5 Drawer
const SidePanelV5 = NiceModal.create(({ title }: { title: string }) => {
  const modal = useModal();
  return (
    <Drawer title={title} {...antdDrawerV5(modal)}>
      <p>v5 Drawer content</p>
    </Drawer>
  );
});

// Show from anywhere
NiceModal.show(SidePanelV5, { title: 'Settings v5' });
```

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

### Register and Show Modal by ID

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Register a modal component with a unique ID using NiceModal.register, then show it using NiceModal.show with the registered ID. This allows for managing modals by a simple string identifier.

```js
import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

// If you use by id, you need to register the modal component.
// Normally you create a modals.js file in your project
// and register all modals there.
NiceModal.register('my-antd-modal', MyAntdModal);

function App() {
  const showAntdModal = () => {
    // Show a modal with arguments passed to the component as props
    NiceModal.show('my-antd-modal', { name: 'Nate' })
  };
  return (
    <div className="app">
      <h1>Nice Modal Examples</h1>
      <div className="demo-buttons">
        <button onClick={showAntdModal}>Antd Modal</button>
      </div>
    </div>
  );
}
```

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

### Imperatively Show Modals with NiceModal.show

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use NiceModal.show to display modals from anywhere in your application, either by passing the component reference or a registered string ID. It returns a Promise that resolves when modal.resolve() is called.

```jsx
import NiceModal from '@ebay/nice-modal-react';
import UserInfoModal from './UserInfoModal';

// Show by component reference — no prior registration needed
function UserList() {
  const handleNewUser = () => {
    NiceModal.show(UserInfoModal)
      .then((newUser) => {
        console.log('New user created:', newUser);
        // { id: '1234567890', name: 'Alice', job: 'Engineer' }
      })
      .catch((err) => {
        console.error('Modal rejected:', err.message);
      });
  };

  const handleEditUser = (user) => {
    NiceModal.show(UserInfoModal, { user })
      .then((updatedUser) => {
        console.log('User updated:', updatedUser);
      });
  };

  return (
    <div>
      <button onClick={handleNewUser}>+ New User</button>
      <button onClick={() => handleEditUser({ id: '1', name: 'Bob', job: 'Designer' })}>
        Edit User
      </button>
    </div>
  );
}

// Show by registered string ID
NiceModal.register('confirm-dialog', ConfirmDialog);

function SomeComponent() {
  const handleDelete = () => {
    NiceModal.show('confirm-dialog', { message: 'Delete this item?' })
      .then(() => deleteItem())
      .catch(() => console.log('Cancelled'));
  };
  return <button onClick={handleDelete}>Delete</button>;
}
```

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

### NiceModal.Provider

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Wrap your app with NiceModal.Provider to enable global modal state management. This component must wrap the part of your component tree where modals will be used.

```APIDOC
## NiceModal.Provider — Wrap your app to enable global modal state

`NiceModal.Provider` is a React context provider that must wrap the part of the component tree where modals will be used. It internally uses `useReducer` to manage modal state and renders a `NiceModalPlaceholder` that auto-mounts registered modals when shown.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import NiceModal from '@ebay/nice-modal-react';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <NiceModal.Provider>
      <App />
    </NiceModal.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```
```

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

### antdDrawerV5

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Ant Design's Drawer component (v5+) with nice-modal-react.

```APIDOC
## antdDrawerV5

### Description
Adapter to use Ant Design's Drawer component (v5+) with nice-modal-react.

### Signature
`antdDrawerV5(modal: NiceModalHandler): { visible: boolean; afterVisibleChange: any; onClose: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### antdDrawer

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Ant Design's Drawer component with nice-modal-react.

```APIDOC
## antdDrawer

### Description
Adapter to use Ant Design's Drawer component with nice-modal-react.

### Signature
`antdDrawer(modal: NiceModalHandler): { visible: boolean; afterVisibleChange: any; onClose: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### Ant Design Drawer Helpers

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Helper functions for integrating NiceModal with Ant Design Drawers. `antdDrawer` is for Ant Design v4, and `antdDrawerV5` is for Ant Design v5+, using `open` and `afterOpenChange` props.

```APIDOC
## `antdDrawer` / `antdDrawerV5` — Ant Design drawer helper

`antdDrawer` returns props for Ant Design `<Drawer>` components, binding `visible`, `onClose`, and `afterClose` to the NiceModal handler. `antdDrawerV5` uses the `open` and `afterOpenChange` props for Ant Design v5+.

### Ant Design v4 Drawer:
```tsx
import { Drawer, Button } from 'antd';
import NiceModal, { useModal, antdDrawer } from '@ebay/nice-modal-react';

const SidePanel = NiceModal.create(({ title }: { title: string }) => {
  const modal = useModal();
  return (
    <Drawer title={title} {...antdDrawer(modal)}>
      <p>Drawer content</p>
      <Button onClick={() => modal.hide()}>Close</Button>
    </Drawer>
  );
});
```

### Ant Design v5 Drawer:
```tsx
import { Drawer } from 'antd';
import NiceModal, { useModal, antdDrawerV5 } from '@ebay/nice-modal-react';

const SidePanelV5 = NiceModal.create(({ title }: { title: string }) => {
  const modal = useModal();
  return (
    <Drawer title={title} {...antdDrawerV5(modal)}>
      <p>v5 Drawer content</p>
    </Drawer>
  );
});
```

### Usage Example:
```tsx
// Show from anywhere
NiceModal.show(SidePanel, { title: 'Settings' });
```
```

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

### create

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Higher-Order Component (HOC) factory that enhances a given React component to be used as a modal with NiceModal.

```APIDOC
## create<P>

### Description
Higher-Order Component (HOC) factory that enhances a given React component to be used as a modal with NiceModal.

### Type Parameters
#### P: {}

### Parameters
#### Comp: ComponentType<P>

### Returns
FC<P & NiceModalHocProps>
```

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

### Integrate Ant Design v5 Modal with NiceModal

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use the `antdModalV5` helper for Ant Design v5+ `<Modal>` components, which uses the `open` prop instead of `visible` and `afterOpenChange` instead of `afterClose`.

```tsx
import { Modal } from 'antd';
import NiceModal, { useModal, antdModalV5 } from '@ebay/nice-modal-react';

// Ant Design v5 (uses open instead of visible)
const AntdV5Modal = NiceModal.create(({ title }: { title: string }) => {
  const modal = useModal();
  return (
    <Modal title={title} {...antdModalV5(modal)}>
      Content here
    </Modal>
  );
});

// Usage
NiceModal.show(AntdV5Modal, { title: 'Ant Design v5' });
```

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

### Provider

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

A React context provider that makes modal functionalities available throughout the application.

```APIDOC
## Provider

### Description
A React context provider that makes modal functionalities available throughout the application.

### Props
*   `children` (ReactNode) - The child components to be wrapped by the provider.
```

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

### create

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Creates a Higher-Order Component (HOC) that wraps a modal component, providing it with nice-modal-react props.

```APIDOC
## create

### Description
Creates a Higher-Order Component (HOC) that wraps a modal component, providing it with nice-modal-react props.

### Signature
`create<P>(Comp: ComponentType<P>) => FC<P & NiceModalHocProps>`

### Parameters
*   `Comp` (ComponentType<P>) - The modal component to wrap.
```

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

### muiDialog

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter for integrating NiceModal with Material-UI Dialog components. It exposes control properties for the dialog's open state and lifecycle events.

```APIDOC
## muiDialog

### Description
Adapter for integrating NiceModal with Material-UI Dialog components. It exposes control properties for the dialog's open state and lifecycle events.

### Parameters
#### modal: NiceModalHandler<Record<string, unknown>>

### Returns
- **open**: boolean
- **onClose**: function
- **onExited**: function
```

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

### muiDialogV5

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapts a NiceModalHandler to be compatible with Material-UI v5 dialog props.

```APIDOC
## muiDialogV5

### Description
Adapts a NiceModalHandler to be compatible with Material-UI v5 dialog props, providing necessary properties like `TransitionProps`, `open`, and `onClose`.

### Parameters

#### modal
- **modal** (NiceModalHandler<Record<string, unknown>>) - Description of the modal handler.

### Returns
- **TransitionProps**: An object containing transition properties for the dialog.
  - **onExited**: function - Callback function executed when the transition exits.
- **open**: boolean - Indicates whether the modal is currently open.
- **onClose**: function - Callback function to close the modal.
```

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

### muiDialog

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapts a NiceModalHandler to be used with Material-UI dialogs, providing open/close/exited states.

```APIDOC
## muiDialog

### Description
Adapts a NiceModalHandler to be used with Material-UI dialogs, providing open/close/exited states.

### Method
`muiDialog(modal: NiceModalHandler<Record<string, unknown>>): { open: boolean; onClose: any; onExited: any }`

### Parameters
#### Path Parameters
- **modal** (NiceModalHandler<Record<string, unknown>>) - The modal handler to adapt.

### Returns
- `{ open: boolean; onClose: any; onExited: any }`: An object containing the dialog's open state and control functions.
```

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

### antdDrawer

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Provides props for integrating Ant Design drawers with nice-modal-react.

```APIDOC
## antdDrawer

### Description
Integrates Ant Design drawers with nice-modal-react, providing necessary props for visibility and event handling.

### Function Signature
`antdDrawer(modal: NiceModalHandler<Record<string, unknown>>): { visible: boolean; afterVisibleChange: any; onClose: any }`

### Parameters
#### modal
- **modal** (NiceModalHandler<Record<string, unknown
>)
  - Description: The modal handler provided by nice-modal-react.

### Returns
- **visible** (boolean)
  - Description: Controls the visibility of the drawer.
- **afterVisibleChange** (function)
  - Description: Callback function that is called after the visibility state of the drawer changes.
    - Signature: `afterVisibleChange(visible: boolean): void`
- **onClose** (function)
  - Description: Callback function to handle the drawer close event.
    - Signature: `onClose(): void`
```

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

### bootstrapDialog

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter for integrating NiceModal with Bootstrap dialogs. It provides properties to manage the dialog's display state and callbacks.

```APIDOC
## bootstrapDialog

### Description
Adapter for integrating NiceModal with Bootstrap dialogs. It provides properties to manage the dialog's display state and callbacks.

### Parameters
#### modal: NiceModalHandler<Record<string, unknown>>

### Returns
- **show**: boolean
- **onExited**: function
- **onHide**: function
```

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

### reducer

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

The reducer function for managing the nice-modal state.

```APIDOC
## reducer

### Description
The reducer function responsible for managing the state of the nice-modal system. It takes the current state and an action, returning the new state.

### Parameters

#### state
- **state** (NiceModalStore) - Optional. The current state of the modal store.
#### action
- **action** (NiceModalAction) - The action to be performed on the state.

### Returns
- **NiceModalStore** - The updated state of the modal store.
```

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

### resolve

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/interfaces/NiceModalHandler.html

Resolves the promise returned by the `show` method with optional arguments.

```APIDOC
## resolve

### Description
Resolves the promise that was returned by the `show` method. This is typically used to pass data back to the caller when the modal has completed its task successfully.

### Method
`resolve(args?: unknown): void`

### Parameters
*   **args** (unknown) - Optional - The arguments to resolve the promise with.

### Returns
`void`
```

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

### bootstrapDialog

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Bootstrap's Dialog component with nice-modal-react.

```APIDOC
## bootstrapDialog

### Description
Adapter to use Bootstrap's Dialog component with nice-modal-react.

### Signature
`bootstrapDialog(modal: NiceModalHandler): { show: boolean; onExited: any; onHide: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### antdDrawerV5

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Provides props for integrating Ant Design drawers (v5+) with nice-modal-react.

```APIDOC
## antdDrawerV5

### Description
Integrates Ant Design drawers (version 5 and above) with nice-modal-react, offering props for state management and event callbacks.

### Function Signature
`antdDrawerV5(modal: NiceModalHandler<Record<string, unknown>>): { open: boolean; afterOpenChange: any; onClose: any }`

### Parameters
#### modal
- **modal** (NiceModalHandler<Record<string, unknown
>)
  - Description: The modal handler provided by nice-modal-react.

### Returns
- **open** (boolean)
  - Description: Controls the open state of the drawer.
- **afterOpenChange** (function)
  - Description: Callback function executed after the drawer's open state changes.
    - Signature: `afterOpenChange(visible: boolean): void`
- **onClose** (function)
  - Description: Callback function to handle the drawer close event.
    - Signature: `onClose(): void`
```

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

### Material UI Dialog Helpers (v4 & v5)

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use `muiDialog` for Material UI v4 and `muiDialogV5` for v5 compatibility. These helpers bind modal state and callbacks to Material UI's `<Dialog>` component.

```tsx
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import Button from '@material-ui/core/Button';
import NiceModal, { useModal, muiDialog, muiDialogV5 } from '@ebay/nice-modal-react';

// MUI v4
const MuiV4Dialog = NiceModal.create(() => {
  const modal = useModal();
  return (
    <Dialog {...muiDialog(modal)}>
      <DialogTitle>Confirm</DialogTitle>
      <DialogActions>
        <Button onClick={() => { modal.resolve(true); modal.hide(); }}>Yes</Button>
        <Button onClick={() => modal.hide()}>No</Button>
      </DialogActions>
    </Dialog>
  );
});

// MUI v5 — uses TransitionProps.onExited instead of onExited directly
const MuiV5Dialog = NiceModal.create(() => {
  const modal = useModal();
  return (
    <Dialog {...muiDialogV5(modal)}>
      <DialogTitle>MUI v5 Dialog</DialogTitle>
      <DialogActions>
        <Button onClick={() => modal.hide()}>Close</Button>
      </DialogActions>
    </Dialog>
  );
});

// Show
NiceModal.show(MuiV4Dialog).then((confirmed) => {
  if (confirmed) console.log('User confirmed');
});
```

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

### antdModalV5

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Ant Design's Modal component (v5+) with nice-modal-react.

```APIDOC
## antdModalV5

### Description
Adapter to use Ant Design's Modal component (v5+) with nice-modal-react.

### Signature
`antdModalV5(modal: NiceModalHandler): { visible: boolean; afterClose: any; onCancel: any; onOk: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### Provide Global Modal State with NiceModal.Provider

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Wrap your application with NiceModal.Provider to enable global modal state management. This component sets up the necessary React context for NiceModal to function.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import NiceModal from '@ebay/nice-modal-react';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <NiceModal.Provider>
      <App />
    </NiceModal.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

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

### useModal(modal, args)

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Hook to show a modal identified by a string name and pass arguments to it.

```APIDOC
## useModal(modal, args)

### Description
Shows a modal identified by a string name and passes optional arguments to it.

### Method
```javascript
useModal(modal: string, args?: Record<string, unknown>): NiceModalHandler
```

### Parameters
#### Path Parameters
- **modal** (string) - Required - The name or identifier of the modal to show.
- **args** (Record<string, unknown>) - Optional - Arguments to pass to the modal.

### Returns
- `NiceModalHandler`: An object with methods to control the displayed modal.
```

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

### reject

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/interfaces/NiceModalHandler.html

Rejects the promise returned by the `show` method with optional arguments.

```APIDOC
## reject

### Description
Rejects the promise that was returned by the `show` method. This allows for error handling or signaling a rejection from the modal.

### Method
`reject(args?: unknown): void`

### Parameters
*   **args** (unknown) - Optional - The arguments to reject the promise with.

### Returns
`void`
```

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

### Integrate Ant Design v4 Drawer with NiceModal

Source: https://context7.com/ebay/nice-modal-react/llms.txt

Use the `antdDrawer` helper to bind Ant Design v4 `<Drawer>` component props (`visible`, `onClose`, `afterVisibleChange`) to a NiceModal handler.

```tsx
import { Drawer, Button } from 'antd';
import NiceModal, { useModal, antdDrawer } from '@ebay/nice-modal-react';

const SidePanel = NiceModal.create(({ title }: { title: string }) => {
  const modal = useModal();
  return (
    <Drawer title={title} {...antdDrawer(modal)}>
      <p>Drawer content</p>
      <Button onClick={() => modal.hide()}>Close</Button>
    </Drawer>
  );
});

// Show from anywhere
NiceModal.show(SidePanel, { title: 'Settings' });
```

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

### antdModalV5

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter for integrating NiceModal with Ant Design v5 modals. It returns properties to control the modal's visibility and lifecycle.

```APIDOC
## antdModalV5

### Description
Adapter for integrating NiceModal with Ant Design v5 modals. It returns properties to control the modal's visibility and lifecycle.

### Parameters
#### modal: NiceModalHandler<Record<string, unknown>>

### Returns
- **open**: boolean
- **afterClose**: function
- **onCancel**: function
- **onOk**: function
```

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

### NiceModalHocProps Properties

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/interfaces/NiceModalHocProps.html

The NiceModalHocProps interface defines the configuration options for modals created using the HOC pattern. These include properties for controlling the initial visibility, unique identification, and mounting behavior of the modal.

```APIDOC
## Interface: NiceModalHocProps

### Description

Props for configuring modal behavior when using the Higher-Order Component (HOC) pattern with nice-modal-react.

### Properties

#### id

*   **Type**: `string`
*   **Description**: A unique identifier for the modal instance.
*   **Required**: Yes

#### defaultVisible

*   **Type**: `boolean`
*   **Description**: Determines if the modal should be visible by default when it is first rendered.
*   **Required**: No

#### keepMounted

*   **Type**: `boolean`
*   **Description**: If true, the modal component will remain mounted in the DOM even when not visible. This can be useful for performance optimizations or preserving component state.
*   **Required**: No
```

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

### Show Modal by Component Reference

Source: https://github.com/ebay/nice-modal-react/blob/main/README.md

Use this to display a modal directly by passing the component reference. The modal's promise resolves when the modal is closed.

```jsx
import NiceModal from '@ebay/nice-modal-react';
import MyModal from './MyModal';

//...
NiceModal.show(MyModal, { someProp: 'hello' }).then(() => {
  // do something when the task in the modal finishes.
});
//...
```

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

### antdModal

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Adapter to use Ant Design's Modal component with nice-modal-react.

```APIDOC
## antdModal

### Description
Adapter to use Ant Design's Modal component with nice-modal-react.

### Signature
`antdModal(modal: NiceModalHandler): { visible: boolean; afterClose: any; onCancel: any; onOk: any }`

### Parameters
*   `modal` (NiceModalHandler) - The modal handler provided by nice-modal-react.
```

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

### antdModal

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Provides props for integrating Ant Design modals with nice-modal-react.

```APIDOC
## antdModal

### Description
Integrates Ant Design modals with nice-modal-react, supplying props for visibility, closing, and confirmation actions.

### Function Signature
`antdModal(modal: NiceModalHandler<Record<string, unknown>>): { visible: boolean; afterClose: any; onCancel: any; onOk: any }`

### Parameters
#### modal
- **modal** (NiceModalHandler<Record<string, unknown
>)
  - Description: The modal handler provided by nice-modal-react.

### Returns
- **visible** (boolean)
  - Description: Controls the visibility of the modal.
- **afterClose** (function)
  - Description: Callback function executed after the modal is closed.
    - Signature: `afterClose(): void`
- **onCancel** (function)
  - Description: Callback function to handle the modal cancellation.
    - Signature: `onCancel(): void`
- **onOk** (function)
  - Description: Callback function to handle the modal confirmation.
    - Signature: `onOk(): void`
```

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

### NiceModal.register

Source: https://context7.com/ebay/nice-modal-react/llms.txt

`NiceModal.register` associates a React component with a string ID so it can be shown/hidden by that ID without importing the component.

```APIDOC
## NiceModal.register

### Description
Associates a React component with a string ID so it can be shown/hidden by that ID without importing the component. Typically called once in a central `modals.js` file at app startup.

### Method
`NiceModal.register(stringId, component)`

### Parameters
- **stringId** (string) - Required - The unique string ID to associate with the modal.
- **component** (React Component) - Required - The modal React component to register.

### Request Example
```jsx
import NiceModal from '@ebay/nice-modal-react';
import UserInfoModal from './UserInfoModal';
import ConfirmDialog from './ConfirmDialog';
import AlertModal from './AlertModal';

// Register all modals once at startup (e.g., in modals.js or index.js)
NiceModal.register('user-info-modal', UserInfoModal);
NiceModal.register('confirm-dialog', ConfirmDialog);
NiceModal.register('alert-modal', AlertModal);

// Now show from anywhere without importing the component
NiceModal.show('user-info-modal', { user: { id: '1', name: 'Alice' } });
NiceModal.show('confirm-dialog', { message: 'Are you sure?' });
```
```

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

### register

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

Registers a modal component with a unique ID and optional initial properties.

```APIDOC
## register

### Description
Registers a modal component with a unique ID and optional initial properties.

### Method
`register<T>(id: string, comp: T, props?: Partial<NiceModalArgs<T>>): void`

### Type Parameters
- **T**: The type of the component being registered, extending `FunctionComponent<any, T>`.

### Parameters
#### Path Parameters
- **id** (string) - The unique identifier for the modal.
- **comp** (T) - The modal component to register.
- **props** (Partial<NiceModalArgs<T>>) - Optional. Initial properties for the modal.

### Returns
- `void`
```

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

### create

Source: https://github.com/ebay/nice-modal-react/blob/main/docs/api/index.html

A higher-order component (HOC) factory that creates a modal component from a given React component. It enhances the component with modal-related props.

```APIDOC
## create

### Description
Creates a modal component from a given React component, enhancing it with modal functionalities.

### Type parameters
*   **P**: Type parameter for the props of the component being wrapped.

### Parameters
*   **Comp**: ComponentType<P>
    The React component to be turned into a modal.

### Returns
*   FC<P & [NiceModalHocProps](interfaces/NiceModalHocProps.html)
    A new functional component that can be used as a modal, with added props for modal control.
```