Creates a portal, allowing rendering of children outside the parent component.
useState()
hook to create a state variable that holds the render()
and remove()
functions for the portal.ReactDOM.createPortal()
and ReactDOM.unmountComponentAtNode()
to create a portal and a function to remove it. Use the useCallback()
hook to wrap and memoize these functions as createPortal()
.useEffect()
hook to call createPortal()
and update the state variable any time el
's value changes.render()
function of the state variable.const usePortal = el => {
const [portal, setPortal] = React.useState({
render: () => null,
remove: () => null,
});
const createPortal = React.useCallback(el => {
const Portal = ({ children }) => ReactDOM.createPortal(children, el);
const remove = () => ReactDOM.unmountComponentAtNode(el);
return { render: Portal, remove };
}, []);
React.useEffect(() => {
if (el) portal.remove();
const newPortal = createPortal(el);
setPortal(newPortal);
return () => newPortal.remove(el);
}, [el]);
return portal.render;
};
const App = () => {
const Portal = usePortal(document.querySelector('title'));
return (
<p>
Hello world!
<Portal>Portalized Title</Portal>
</p>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
React, Hooks
Tracks the browser's location hash value, and allows changing it.
React, Hooks
Handles the event of clicking outside of the wrapped component.
React, Hooks
Delays creating a stateful value until some condition is met.