Modal 集成 🧩

Modal 和 Drawer 与第三方库的集成。

Nice Modal

Nice Modal 与 React Suite 的 Modal/Drawer 集成提供了轻量级、灵活定制的模态窗口解决方案。

安装 

npm install @ebay/nice-modal-react

使用 

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

示例

Modal Interactions

React Suite Interactions 提供了三种方法——alert、confirm 和 prompt——使得使用 Modal 就像调用原生方法一样简单。

安装 

npm install @rsuite/interactions

使用 

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

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

示例

Vercel banner