{"repo":"iamthesiz/react-useportal","free":true,"listed":false,"github":"https://github.com/iamthesiz/react-useportal","clone":"git clone https://github.com/iamthesiz/react-useportal.git","description":"🌀 React hook for Portals","language":"TypeScript","stars":885,"topics":["react-hooks","react","react-portal","portal","javascript","loading-bar","modal","lightbox","notification","dialog"],"license":"MIT","category":"deployment-docker-iac","readme_excerpt":"usePortal 🌀 React hook for using Portals Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering). Features -------- - SSR (server side rendering) support - TypeScript support - 1 dependency (use-ssr) - Built in state Examples - SSR Example - Next.js - codesandbox container (sometimes buggy, if so try this example) - Modal Example (useModal) - create-react-app - Dropdown Example (useDropdown) - Next.js - Tooltip Example (useTooltip) - Next.js Installation ------------ Usage ----- Stateless With State Need Animations? Customizing the Portal directly By using onOpen , onClose or any other event handler, you can modify the Portal and return it. See useDropdown for a working example. If opening the portal from a click event it's important that you pass the event object to openPortal and togglePortal otherwise you will need to attach a ref to the clicked element (if you want to be able to open the portal without passing an event you will need to set programmaticallyOpen to true ). Make sure you are passing the html synthetic event to the openPortal and togglePortal . i.e. onClick={e = openPortal(e)} Usage with a ref If for some reason, you don't want to pass around the event to openPortal or togglePortal and","default_branch":null,"files":null,"tree":[],"storefront":"/r/iamthesiz","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/iamthesiz/react-useportal/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}