npm install --save @react-overlay/overlays
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 InfoModal from './overlays/InfoModal';
export default function Content() {
const modalOverlay = useModalOverlay();
const handleOpenModal = () => {
const modal = <InfoModal />;
modalOverlay.open(modal);
};
return (
<div>
<h1 className="title">test</h1>
<button onClick={handleOpenModal}>open a modal </button>
<style jsx>{`
.title {
margin: 10px;
}
`}</style>
</div>
);
}
MIT © relaxgo