Skip to content

Instantly share code, notes, and snippets.

@brandoncc
Created June 4, 2019 23:33
Show Gist options
  • Save brandoncc/1e2049845e31c612ffa012b3aed825db to your computer and use it in GitHub Desktop.
Save brandoncc/1e2049845e31c612ffa012b3aed825db to your computer and use it in GitHub Desktop.
import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
export function LandingPad() {
return <div id="portal-root" />;
}
export function Portal (props) {
const elRef = useRef(document.createElement("div"));
const rootRef = useRef();
useEffect(() => {
rootRef.current = document && document.getElementById("portal-root");
rootRef.current && rootRef.current.appendChild(elRef.current);
return () => {
rootRef.current && rootRef.current.removeChild(elRef.current);
};
}, []);
return ReactDOM.createPortal(props.children, elRef.current);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment