38 lines
775 B
TypeScript
38 lines
775 B
TypeScript
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
|
|
interface PortalProps {
|
|
visible?: boolean;
|
|
element: React.ReactNode;
|
|
appendTo?: HTMLElement;
|
|
}
|
|
|
|
const Portal = ({ visible, element, appendTo }: PortalProps) => {
|
|
const [mounted, setMounted] = React.useState(visible);
|
|
|
|
const domExist = React.useCallback(() => {
|
|
return !!(
|
|
typeof window !== "undefined" &&
|
|
window.document &&
|
|
window.document.createElement
|
|
);
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (domExist() && !mounted) {
|
|
setMounted(true);
|
|
}
|
|
}, [domExist, mounted]);
|
|
|
|
return element && mounted
|
|
? ReactDOM.createPortal(element, appendTo || document.body)
|
|
: null;
|
|
};
|
|
|
|
Portal.defaultProps = {
|
|
visible: false,
|
|
appendTo: null,
|
|
};
|
|
|
|
export { Portal };
|