22 lines
1.1 KiB
TypeScript
22 lines
1.1 KiB
TypeScript
import { ReactNode } from "react";
|
|
import ReactDOM from "react-dom";
|
|
|
|
// Define the props interface for the component, which requires `children` as a ReactNode type
|
|
interface PortalProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
// The `RenderOverlay` component allows rendering of its children into a specific DOM node (`root-over`) outside of the regular React component tree
|
|
const RenderOverlay = ({ children }: PortalProps) => {
|
|
// Retrieve the DOM element with the id `root-over` which serves as the mounting point for the overlay content.
|
|
const rootOver = document.getElementById("root-over");
|
|
|
|
// If the `rootOver` element exists in the DOM, use `ReactDOM.createPortal` to render the `children` inside this element
|
|
// `ReactDOM.createPortal` allows rendering outside of the usual React component tree, useful for overlays, modals, and tooltips
|
|
// If `rootOver` is null (i.e., does not exist), return null, rendering nothing
|
|
return rootOver ? ReactDOM.createPortal(children, rootOver) : null;
|
|
};
|
|
|
|
// Export the `RenderOverlay` component as the default export for use in other parts of the application
|
|
export default RenderOverlay;
|