import { Meta } from '@storybook/addon-docs/blocks';

<Meta
    title="Utilities/usePortalElement"
    summary="Provides reference to the element to be used as a portal container."
/>

# usePortalElement()

Provides reference to the element that can be used as a portal container.

Use it to avoid issues with unstyled content in portals. Requires a `RootProvider` ancestor — see
the [Popovers convention](/docs/conventions-popovers--docs) for how Design System overlays use the
shared portal.

```tsx
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>
    );
};
```