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.

Installation 

npm install @ebay/nice-modal-react

Usage 

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

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>
  );
});

NiceModal.show(MyModal, { id: 'test', name: 'Nate' });

Examples

Modal Interactions

React Suite Interactions provides three methods—alert, confirm, and prompt—making it as easy to use the Modal as calling native methods.

Installation 

npm install @rsuite/interactions

Usage 

import { alert, confirm, confirm } from '@rsuite/interactions';

alert('Hello, world!');
confirm('Are you sure?');
prompt('What is your name?');

Examples

Vercel banner