import usePortal from 'react-useportal' const App = () => { const { Portal } = usePortal() return ( <Portal> This text is portaled at the end of document.body! </Portal> ) } const App = () => { const { Portal } = usePortal({ bindTo: document && document.getElementById('san-francisco') }) return ( <Portal> This text is portaled into San Francisco! </Portal> ) }

import usePortal from 'react-useportal' const App = () => { var { openPortal, closePortal, isOpen, Portal } = usePortal() // want to use array destructuring? You can do that too var [openPortal, closePortal, isOpen, Portal] = usePortal() return ( <> <button onClick={openPortal}> Open Portal </button> {isOpen && ( <Portal> <p> This Portal handles its own state.{' '} <button onClick={closePortal}>Close me!</button>, hit ESC or click outside of me. </p> </Portal> )} </> ) }

import usePortal from 'react-useportal' const App = () => { const { openPortal, closePortal, isOpen, Portal } = usePortal() return ( <> <button onClick={openPortal}> Open Portal </button> <Portal> <p className={isOpen ? 'animateIn' : 'animateOut'}> This Portal handles its own state.{' '} <button onClick={closePortal}>Close me!</button>, hit ESC or click outside of me. </p> </Portal> </> ) }

const useModal = () => { const { isOpen, openPortal, togglePortal, closePortal, Portal } = usePortal({ onOpen({ portal }) { portal.current.style.cssText = `  /* add your css here for the Portal */  position: fixed;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  z-index: 1000;  ` } }) return { Modal: Portal, openModal: openPortal, toggleModal: togglePortal, closeModal: closePortal, isOpen } } const App = () => { const { openModal, closeModal, isOpen, Modal } = useModal() return <> <button onClick={e => openModal(e)}>Open Modal<button> {isOpen && ( <Modal> This will dynamically center to the middle of the screen regardless of the size of what you put in here </Modal> )} </> }

import usePortal from 'react-useportal' const App = () => { var { ref, openPortal, closePortal, isOpen, Portal } = usePortal() return ( <> {/* see below how I don't have to pass the event if I use the ref */} <button ref={ref} onClick={() => openPortal()}> Open Portal </button> {isOpen && ( <Portal> <p> This Portal handles its own state.{' '} <button onClick={closePortal}>Close me!</button>, hit ESC or click outside of me. </p> </Portal> )} </> ) }

const { openPortal, closePortal, togglePortal, isOpen, Portal, // if you don't pass an event to openPortal, closePortal, or togglePortal and you're not using programmaticallyOpen, you will need // to put this on the element you want to interact with/click ref, // if for some reason you want to interact directly with the portal, you can with this ref portalRef, } = usePortal({ closeOnOutsideClick: true, closeOnEsc: true, bindTo, // attach the portal to this node in the DOM isOpen: false, // `event` has all the fields that a normal `event` would have such as `event.target.value`, etc. // with the additional `portal` and `targetEl` added to it as seen in the examples below onOpen: (event) => { // can access: event.portal, event.targetEl, event.event, event.target, etc. }, // `onClose` will not have an `event` unless you pass an `event` to `closePortal` onClose({ portal, targetEl, event }) {}, // `targetEl` is the element that you either are attaching a `ref` to // or that you are putting `openPortal` or `togglePortal` or `closePortal` on onPortalClick({ portal, targetEl, event }) {}, // in addition, any event handler such as onClick, onMouseOver, etc will be handled the same onClick({ portal, targetEl, event }) {} })

 const { openPortal, closePortal, isOpen, Portal } = usePortal({ popup: ['', '', 'width=600,height=400,left=200,top=200'] }) // window.open('', '', 'width=600,height=400,left=200,top=200')