|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import React, { useLayoutEffect, useRef } from 'react';
|
|
|
|
|
import ReactDOM from 'react-dom';
|
|
|
|
|
|
|
|
|
|
interface IPortal {
|
|
|
|
@ -8,9 +8,27 @@ interface IPortal {
|
|
|
|
|
/**
|
|
|
|
|
* Portal
|
|
|
|
|
*/
|
|
|
|
|
const Portal: React.FC<IPortal> = ({ children }) => ReactDOM.createPortal(
|
|
|
|
|
children,
|
|
|
|
|
document.querySelector('#soapbox') as HTMLDivElement,
|
|
|
|
|
);
|
|
|
|
|
const Portal: React.FC<IPortal> = ({ children }) => {
|
|
|
|
|
const isRendered = useRef<boolean>(false);
|
|
|
|
|
|
|
|
|
|
useLayoutEffect(() => {
|
|
|
|
|
if (isRendered.current) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isRendered.current = true;
|
|
|
|
|
}, [isRendered.current]);
|
|
|
|
|
|
|
|
|
|
if (!isRendered.current) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
ReactDOM.createPortal(
|
|
|
|
|
children,
|
|
|
|
|
document.getElementById('soapbox') as HTMLDivElement,
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Portal;
|