Skip to main content
Graphy renders some elements outside of its root container using React portals. These include the annotations menu, text editor toolbar, tooltips and other overlay components. By default, these portal elements render into the document body. Use PortalProvider to specify a custom container instead, which is useful for modals, z-index control or CSS containment.

​
Basic usage

Wrap your GraphProvider with PortalProvider. All portal elements will be rendered as children of the PortalProvider. 
import { GraphProvider, Graph, PortalProvider } from '@graphysdk/core';

<PortalProvider>
  <GraphProvider>
    <Graph />
  </GraphProvider>
  {/* portal elements will be rendered here */}
</PortalProvider>

​
Props

PropDescription
childrenReact children to render inside the provider
asElement type to render as (defaults to div)
classNameCSS class name for styling

​
Styling

By default, PortalProvider applies display: contents to avoid affecting layout. When you pass a className, you control the styling completely: 
<PortalProvider className="relative z-50">
  <GraphProvider config={config} onChange={setConfig}>
    <Graph />
  </GraphProvider>
</PortalProvider>

​
Common use cases

Modals and dialogs – Prevent portal elements from appearing behind modal overlays: 
<Modal className="z-50">
  <PortalProvider>
    <GraphProvider config={config} onChange={setConfig}>
      <Graph />
    </GraphProvider>
  </PortalProvider>
</Modal>
Custom containers – Render portals in a specific DOM element: 
<PortalProvider as="section" className="graph-portal-container">
  <GraphProvider config={config} onChange={setConfig}>
    <Graph />
  </GraphProvider>
</PortalProvider>