Portal
Utility component to help with the React createPortal API.
#
Importimport { Portal, usePortal } from '@volue/wave-react';
#
Portals in a nutshellPortals 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 PortalsYou 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 ReferenceProp | Type | Default |
---|---|---|
containerRef | React.MutableRefObject<HTMLElement> | No default value |