@slithy/portal
Advanced tools
A hooks-based React portal. Automatically handles creating and tearing down DOM root elements — no need to ensure a target already exists.
npm install @slithy/portal
Peer dependencies: react@^17 || ^18 || ^19, react-dom@^17 || ^18 || ^19
PortalRenders children into a portal outside the current React tree. By default, portals are appended to document.body.
import { Portal } from '@slithy/portal'
<Portal>
<MyTooltip />
</Portal>
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to render in the portal |
id | string | "portal" | ID of the portal root element. If an element with this ID already exists in the DOM, it is reused (persistent portal). Otherwise a new element is created and appended to <body>. |
element | string | "div" | HTML tag to use for the portal wrapper element |
zIndex | string | — | Sets style.zIndex on the portal root element |
attachment | (root, element) => void | root.appendChild(element) | Custom function to attach the portal element to its root |
id="portal"): A new wrapper element is created per portal instance and removed on unmount.id): The root element with that ID is reused across instances — only one DOM node is created for all portals sharing the same ID. Useful for tooltip or modal containers.// Persistent — all tooltips share one #tooltips container
<Portal id="tooltips">
<Tooltip />
</Portal>
// Transient — each portal creates and removes its own wrapper
<Portal>
<FloatingMenu />
</Portal>
By default, content is appended to the portal root. Pass attachment to customize this — for example, to prepend instead:
<Portal
id="notifications"
attachment={(root, element) => root.prepend(element)}
>
<Notification />
</Portal>
FAQs
A hooks-based React portal.
We found that @slithy/portal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.