Portal provider

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

Prop	Description
`children`	React children to render inside the provider
`as`	Element type to render as (defaults to `div`)
`className`	CSS 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>

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Basic usage

Props

Styling

Common use cases

​Basic usage

​Props

​Styling

​Common use cases

Basic usage

Props

Styling

Common use cases