import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={code:`code`,h1:`h1`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Utilities/usePortalElement`}),`
`,(0,c.jsx)(t.h1,{id:`useportalelement`,children:`usePortalElement()`}),`
`,(0,c.jsx)(t.p,{children:`Provides reference to the element that can be used as a portal container.`}),`
`,(0,c.jsx)(t.p,{children:`Use it to avoid issues with unstyled content in portals.`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { Tooltip } from 'radix-ui';
import { usePortalElement } from '@preply/ds-web-root';

const MyComponent = () => {
    const portalElement = usePortalElement();

    return (
        <Tooltip.Portal container={portalElement}>
            <Tooltip.Content>
                <div>...</div>
            </Tooltip.Content>
        </Tooltip.Portal>
    );
};
`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};