@gravity-ui/uikit
Version:
Gravity UI base styling and components
33 lines (23 loc) • 1.54 kB
Markdown
# Portal
`Portal` is a utility component. Basically, it is a simple wrapper around React's [`createPortal`](https://react.dev/reference/react-dom/createPortal) that allows you to render children into a DOM node outside the parent component.
```tsx
import {Portal} from '-ui/uikit';
```
## Container
By default, `Portal` renders its children into `document.body`; however, you can change this with the `container` property.
Additionally, you can provide a container to all `Portal`s in the React subtree using the `PortalProvder` component.
```tsx
import {Portal, PortalProvider} from '-ui/uikit'
const myRoot = document.getElementById('my-root');
<Portal>This is rendered inside document.body</Portal>
<Portal container={myRoot}>This is rendered inside #my-root node</Portal>
<PortalProvider container={myRoot}>
<Portal>This is also rendered inside #my-root</Portal>
</PortalProvider>
```
## Properties
| Name | Description | Type | Default |
| :------------ | :------------------------------------------------------------- | :---------------: | :-------------: |
| children | Any React content | `React.ReactNode` | |
| container | DOM element's children to mount | `HTMLElement` | `document.body` |
| disablePortal | If true, renders the children within the normal DOM hierarchy. | `boolean` | |