Skip to main content

WidgetPanel

WidgetPanel renders a @deck.gl-community/panels panel or container inside a React tree.

Import​

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

Props​

type WidgetPanelProps =
  | {
      panel: WidgetPanelDefinition;
      container?: never;
      themeMode?: 'inherit' | 'light' | 'dark';
      className?: string;
      style?: CSSProperties;
      framed?: boolean;
    }
  | {
      container: WidgetContainer;
      panel?: never;
      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 {WidgetPanel} from '@deck.gl-community/react';
import {MarkdownPanel} from '@deck.gl-community/panels';

export function DocsCallout() {
  return (
    <WidgetPanel
      panel={
        new MarkdownPanel({
          id: 'summary',
          title: 'Summary',
          markdown: 'Rendered inside React without a PanelManager.'
        })
      }
      themeMode="light"
    />
  );
}

Remarks​

  • Accepts either one WidgetPanel definition or a full WidgetContainer.
  • Uses the panels module's existing Preact renderer internally, so existing panel implementations keep working unchanged.
  • Adds deck-widget-container to its host so panel theme inference behaves the same way it does in widget hosts.
  • Supports light, dark, and inherit theme modes.
  • framed={false} is useful when the surrounding React layout already provides the outer surface.