Portal

Utility component to help with the React createPortal API.

Import#

import { Portal, usePortal } from '@volue/wave-react';

Portals in a nutshell#

Portals are used to transport any component or element to the end of document.body and render a React tree into them.

They are seful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, dialogs etc).

Examples#

Basic#

Nesting Portals#

You can also nest multiple portals within themselves, this will create a nested DOM hierarchy to make it easy to create nested dialogs, popovers, etc.


API Reference#

Prop
Type
Default
containerRef
React.MutableRefObject<HTMLElement>
No default value