FloatingPortal
Portals your floating element outside the main app node.
import {FloatingPortal} from '@floating-ui/react-dom-interactions';
function Tooltip() {
return (
<FloatingPortal>
{open && <div>Tooltip</div>}
</FloatingPortal>
);
}
Don't conditionally render the FloatingPortal. Instead, conditionally render its children as seen above.
Props
interface Props {
id?: string;
root?: HTMLElement | null;
}
id
default: 'floating-ui-root'
If this node does not exist on the document, it will be created
for you and will be appended to the end of the <body>
.
<FloatingPortal id="custom-root-id">
{open && <div>Tooltip</div>}
</FloatingPortal>
root
Alternatively, you may pass the root element itself, which supports shadow roots.
<FloatingPortal root={shadowRootNode}>
{open && <div>Tooltip</div>}
</FloatingPortal>
useFloatingPortalNode
Exposes the portal container node for custom use in other components. The hook injects the node, if it does not yet exist in the DOM.
function App() {
const portalNode = useFloatingPortalNode({
id: 'custom-root-id', // 'floating-ui-root' by default
enabled: false, // true by default
});
if (portalNode) {
return ReactDOM.createPortal(<div></div>, portalNode);
}
return null;
}