Skip to main content

Panel

Panel renders a @deck.gl-community/panels panel definition inside a React tree.

Import​

import {Panel, type PanelProps} from '@deck.gl-community/react';

Props​

type PanelProps = {
  panel: PanelDefinition;
  themeMode?: 'inherit' | 'light' | 'dark';
  className?: string;
  style?: CSSProperties;
  framed?: boolean;
};

Demo​

The component is intended for React surfaces such as Docusaurus MDX. This page is rendering one directly:

Usage​

import {Panel} from '@deck.gl-community/react';
import {MarkdownPanel} from '@deck.gl-community/panels';

const summaryPanel = new MarkdownPanel({
  id: 'summary',
  title: 'Summary',
  markdown: 'Rendered inside React without a PanelManager.'
});

export function DocsCallout() {
  return <Panel panel={summaryPanel} themeMode="light" />;
}

Arrow panels in MDX​

Create Arrow inspection panels from @deck.gl-community/panels and render them with Panel in MDX.

import {Panel} from '@deck.gl-community/react';
import {ArrowTablePanel} from '@deck.gl-community/panels';

const tablePanel = new ArrowTablePanel({
  id: 'arrow-table',
  title: 'Arrow Table',
  table,
  maxRows: 50,
  showRowIndex: true
});

export function ArrowTableDocsPanel() {
  return <Panel panel={tablePanel} themeMode="light" />;
}

Remarks​

  • Accepts one reusable panel definition from @deck.gl-community/panels.
  • Uses the panels module's existing Preact renderer internally, so existing panel implementations keep working unchanged.
  • Supports light, dark, and inherit theme modes using the panels module's theme variables.
  • framed={false} is useful when the surrounding React layout already provides the outer surface.