react-overlay

The easy way to manger all react overlays, like modal, toast

Install

npm install --save @react-overlay/overlays

Usage

Add OverlayProvider on the root, and mount all your overlay container

import React, { Component } from 'react'

import { OverlayProvider, ModalOverlay } from '@react-overlay/overlays';
import '@react-overlay/overlays/style.css';
import Content from './Content';

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <>
    <OverlayProvider>
      <Content />
      <ModalOverlay />
    </OverlayProvider>
  </>
);

Then it's easy to open your modal or other components by a hook. the modal will be mounted on the root.

import { useModalOverlay } from '@react-overlay/overlays';

import ConfirmModal from '$/components/modals/ConfirmModal';

export default function OpenBasicModal() {
  const modalOverlay = useModalOverlay();

  const handleOpenModal = () => {
    const modal = <ConfirmModal description="This is a message for confirm" />;
    modalOverlay.open(modal);
  };

  return (
    <div>
      <button className="btn" onClick={handleOpenModal}>
        Open a Modal
      </button>
    </div>
  );
}