Modal Integrations 🧩

Modal and Drawer integrations with third-party libraries.

Nice Modal

The integration of Nice Modal with React Suite's Modal/Drawer offers a lightweight and flexible customizable modal window solution.

Usage

Install Nice Modal

First, install the @ebay/nice-modal-react dependency:

npm install @ebay/nice-modal-react

Create a Modal Component

Use NiceModal.create to create a reusable modal component:

import { Modal, Button } from 'rsuite';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

export const MyModal = NiceModal.create(({ id, name }) => {
  const modal = useModal();
  return (
    <Modal open={modal.visible} onClose={modal.hide} onExited={modal.remove} backdrop="static">
      <Modal.Header>
        <Modal.Title>Hello React Suite</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        Greetings: {id}, {name}!
      </Modal.Body>
    </Modal>
  );
});

Using the Modal

Wrap your application with NiceModal.Provider and then you can show the modal from anywhere:

import NiceModal from '@ebay/nice-modal-react';
import { MyModal } from './MyModal';

const App = () => {
  return (
    <NiceModal.Provider>
      <Button
        appearance="primary"
        onClick={() => {
          NiceModal.show(MyModal, { id: 'test', name: 'Nate' });
        }}
      >
        Show Modal
      </Button>
    </NiceModal.Provider>
  );
};

Examples

Modal

Drawer