mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
feat(modals): add portal to display modals in
- feat(_document): render portals in the div element with id browser_extension - feat(ModalPortal): useReactDom.createPortal to render childrens
This commit is contained in:
parent
647b4d043a
commit
0c4ecd9025
14
components/core/ModalPortal.js
Normal file
14
components/core/ModalPortal.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as ReactDOM from "react-dom";
|
||||||
|
|
||||||
|
export const ModalPortal = ({ children }) => {
|
||||||
|
const [mounted, setMounted] = React.useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
|
||||||
|
return () => setMounted(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return mounted ? ReactDOM.createPortal(children, document.getElementById("modals_portal")) : null;
|
||||||
|
};
|
@ -15,6 +15,7 @@ class MyDocument extends Document {
|
|||||||
* e.g. if the extension is installed on the user's browser, it will add 'isDownloaded' to className*/}
|
* e.g. if the extension is installed on the user's browser, it will add 'isDownloaded' to className*/}
|
||||||
<div id="browser_extension" />
|
<div id="browser_extension" />
|
||||||
<Main />
|
<Main />
|
||||||
|
<div id="modals_portal" />
|
||||||
<NextScript />
|
<NextScript />
|
||||||
</body>
|
</body>
|
||||||
</Html>
|
</Html>
|
||||||
|
Loading…
Reference in New Issue
Block a user