react-modal-open

react-modal-open

Usage1 createModalComponent

// MyModal.tsx
const MyModal: React.FC<{ onClose?: () => void }> = ({ onClose }) => (
  <div>
    <button onClick={onClose}>close</button>
    MyModal
  </div>
);

export const MyModalComponent = createModalComponent(MyModal);

// App.tsx
import { MyModalComponent } from './MyModal';

(async () => {
  const closeMyModal = await MyModalComponent.open();
  setTimeout(() => {
    closeMyModal();
  }, 3000);
})();

Usage2 CommonModal

import { CommonModal } from 'react-modal-open';

const MyModal: React.FC<{ onClose?: () => void; }> = ({
  onClose,
}) => (
  <CommonModal
    open
    wrapperProps={{
      id: 'xxx',
      className: 'xxx',
      ['data-xxx']: 'xxx',
      style: {
        width: 500,
        // ...
      },
    }}
    maskProps={{
      id: 'xxx',
      className: 'xxx',
      ['data-xxx:'] 'xxx',
      style: {
        width: 500,
        // ...
      },
    }}
    zIndex={999}
    maskClosable
    destroyOnClose
    onClose={onClose}
  >
    <button onClick={onClose}>close</button>
    MyModal
  </CommonModal>
);