website/pages/docs/FloatingPortal.mdx
<PageCard>
# FloatingPortal
Portals the floating element into a given container element — by
default, outside of the app root and into the body.
```js
import {FloatingPortal} from '@floating-ui/react';
```
This is necessary to ensure the floating element can appear
outside any potential parent containers that cause clipping (such
as `overflow: hidden`), while retaining its location in the React
tree.
<ShowFor packages={['react-dom']}>
<PackageLimited>@floating-ui/react only</PackageLimited>
</ShowFor>
</PageCard>
```js
function Tooltip() {
if (isOpen) {
return (
<FloatingPortal>
<div>Floating element</div>
</FloatingPortal>
);
}
return null;
}
```
Context is provided so that portals nested in one another are
appended to their respective parent.
<Notice>
The portal component should be conditionally rendered based on
the `isOpen` or mounted state (as seen above), rather than
always rendered. This prevents a portal container from being
mounted to the DOM when not in use.
</Notice>
## Props
```ts
interface FloatingPortalProps {
root?:
| HTMLElement
| null
| React.MutableRefObject<HTMLElement | null>;
id?: string;
preserveTabOrder?: boolean;
}
```
### `root{:.keyword}`
Optionally specifies the root node the portal container will be
appended to.
```js
// Element
<FloatingPortal root={rootNode} />
// MutableRefObject
<FloatingPortal root={rootNodeRef} />
```
### `id{:.keyword}`
Optionally selects the node with the id if it exists, or create
it and append it to the specified root (by default
`document.body{:js}`).
```js
<FloatingPortal id="custom-root-id" />
```
### `preserveTabOrder{:.keyword}`
default: `true{:js}`
When using non-modal focus management using
`<FloatingFocusManager />{:js}`, this will preserve the tab order
context based on the React tree instead of the DOM tree.
```js
<FloatingPortal preserveTabOrder={false} />
```
## `useFloatingPortalNode(){:js}`
Exposes the portal container node for custom use in other
components.
```js
function App() {
const portalNode = useFloatingPortalNode({
// Accepts `id` and `root` props
});
if (portalNode) {
return createPortal(<div />, portalNode);
}
return null;
}
```