{"library":"react-useportal","title":"React usePortal Hook","description":"react-useportal is a utility React hook for creating and managing React Portals, a feature introduced in React 16 that allows components to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Currently at version 1.0.19, the package simplifies common use cases such as modals, tooltips, dropdowns, and notifications. Key differentiators include built-in isomorphic Server-Side Rendering (SSR) support, full TypeScript compatibility, and a minimal dependency footprint (primarily `use-ssr`). Despite its utility, the project has seen very limited maintenance and updates in recent years, making its release cadence effectively dormant. It aims to abstract away the direct usage of `ReactDOM.createPortal` for a more React-hook-centric API.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-useportal"],"cli":null},"imports":["import usePortal from 'react-useportal'","const { Portal } = usePortal()","import type { UsePortalOptions } from 'react-useportal'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport usePortal from 'react-useportal';\n\nfunction App() {\n  // Basic usage: Portals content to document.body by default\n  const { Portal: BodyPortal } = usePortal();\n\n  // Custom target: Portal content to a specific element\n  // Ensure 'portal-root' exists in your HTML (e.g., public/index.html)\n  const { Portal: CustomPortal } = usePortal({\n    bindTo: typeof document !== 'undefined' ? document.getElementById('portal-root') : null,\n    // Ensure `document` is available for SSR compatibility\n  });\n\n  // Stateful example with open/close controls\n  const { Portal: StatefulPortal, openPortal, closePortal, isOpen } = usePortal();\n\n  return (\n    <div>\n      <h1>React usePortal Examples</h1>\n      <p>This text is rendered in the main application DOM.</p>\n\n      <h2>Stateless Portal to document.body</h2>\n      <BodyPortal>\n        <p style={{ border: '2px solid blue', padding: '10px' }}>\n          This content is portaled to the end of document.body.\n        </p>\n      </BodyPortal>\n\n      <h2>Custom Target Portal</h2>\n      <div id=\"portal-root\" style={{ border: '2px dashed green', padding: '10px' }}>\n        <p>This is the custom target element (e.g., in public/index.html).</p>\n        <CustomPortal>\n          <p style={{ border: '2px solid purple', padding: '10px' }}>\n            This content is portaled into '#portal-root'.\n          </p>\n        </CustomPortal>\n      </div>\n\n      <h2>Stateful Portal (Modal Example)</h2>\n      <button onClick={openPortal}>Open Stateful Portal</button>\n      {isOpen && (\n        <StatefulPortal>\n          <div style={{\n            position: 'fixed',\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50%, -50%)',\n            backgroundColor: 'white',\n            padding: '20px',\n            border: '1px solid black',\n            zIndex: 1000,\n          }}>\n            <h3>Hello from Stateful Portal!</h3>\n            <p>You can control its visibility with buttons.</p>\n            <button onClick={closePortal}>Close Modal</button>\n          </div>\n        </StatefulPortal>\n      )}\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates basic stateless portal usage to `document.body` and a custom target, alongside a stateful example showing how to programmatically open and close a modal-like portal. It includes SSR guards for `document` access.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}