Skip to main content

PanelModal

from v9.3

PanelModal renders panel content in a centered modal container with an optional trigger.

Use it when secondary content should open on demand without permanently taking space in the standalone layout.

Usage​

import {MarkdownPanel, PanelManager, PanelModal, type PanelModalProps} from '@deck.gl-community/panels';

const helpPanel = new MarkdownPanel({
  id: 'help',
  title: 'Help',
  markdown: 'Secondary content opened from a standalone modal.'
});

const panelModal = new PanelModal({
  id: 'help-modal',
  panel: helpPanel,
  title: 'Help',
  triggerLabel: 'Open help'
});

const panelManager = new PanelManager({
  parentElement: document.getElementById('app') as HTMLElement
});

panelManager.setProps({
  components: [panelModal]
});

Props​

type PanelModalProps = PanelContainerProps & {
  panel?: Panel;
  placement?: PanelPlacement;
  title?: string;
  triggerLabel?: string;
  triggerIcon?: string;
  showTitleBar?: boolean;
  hideTrigger?: boolean;
  button?: boolean;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  openShortcuts?: KeyboardShortcut[];
  shortcuts?: KeyboardShortcut[];
};

Remarks​

  • Accepts one reusable panel definition.
  • Supports controlled and uncontrolled open state.
  • Closes on backdrop click and Escape.
  • openShortcuts are installed through deck.eventManager when available and open the modal without importing deck.gl into @deck.gl-community/panels.
  • shortcuts are also registered through the same manager and keep their own handlers.
  • Restores focus to deck.canvas after close when mounted by deck.gl.
  • Use ModalPanelWidget from @deck.gl-community/widgets when the same UI should be mounted through deck.gl.