Menu

gitpiper

usePortal react Code Snippet in 2024

hooksstateeffectadvanced

Last Updated: 18 May 2024

Creates a portal, allowing rendering of children outside the parent component.

  • Use the useState() hook to create a state varible that holds the render() and remove() functions for the portal.
  • Use 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().
  • Use the useEffect() hook to call createPortal() and update the state variable any time el's value changes.
  • Finally, return the 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 snippet similar to usePortal For You in May 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️