Skip to main content

Using Components

Use PanelComponent when UI belongs to @deck.gl-community/panels but is not itself titled panel content.

Panel is the base class for titled content. PanelContainer hosts one Panel inside box, modal, sidebar, or full-screen chrome. Other mountable UI, such as toolbars, toast stacks, or app-specific status controls, should extend or use PanelComponent directly.

Choose The Right Primitive​

NeedUse
Titled content inside a panel layoutPanel
One panel mounted inside shell chromeBoxPanelContainer, ModalPanelContainer, SidebarPanelContainer, or FullScreenPanelContainer
Actions or status badges outside panel contentToolbarComponent
App notificationsToastComponent with toastManager
App-specific mountable UI owned by panelsExtend PanelComponent

ToolbarComponent and ToastComponent are specialized panel-managed UI components. They are not panel containers because they do not host a Panel.

Standalone Components​

PanelManager mounts any PanelComponent, including panels, panel containers, toolbar/toast components, and application-specific components.

import {
  PanelComponent,
  PanelManager,
  ToastComponent,
  ToolbarComponent,
  toastManager,
  type PanelComponentProps
} from '@deck.gl-community/panels';

class StatusComponent extends PanelComponent<PanelComponentProps> {
  static defaultProps: Required<PanelComponentProps> = {
    ...PanelComponent.defaultProps,
    id: 'status'
  };

  placement = 'top-right' as const;
  className = 'app-status';

  constructor(props: PanelComponentProps = {}) {
    super(props);
  }

  override onRenderHTML(rootElement: HTMLElement): void {
    rootElement.textContent = 'Ready';
  }
}

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

panelManager.setProps({
  components: [
    new StatusComponent(),
    new ToolbarComponent({
      items: [
        {
          kind: 'action',
          id: 'refresh',
          label: 'Refresh',
          onClick: refreshData
        }
      ]
    }),
    new ToastComponent()
  ]
});

toastManager.toast({
  type: 'info',
  message: 'Ready'
});

Use PanelComponentProps._container only when a component must mount into an explicit host instead of the manager-created placement host.

deck.gl Components​

When deck.gl owns placement, adapt the panel-owned component through PanelWidget. Named adapters exist only where they are concise construction helpers.

import {PanelWidget, ToastWidget, ToolbarWidget} from '@deck.gl-community/widgets';

const widgets = [
  new PanelWidget({component: new StatusComponent()}),
  new ToolbarWidget({
    items: [
      {
        kind: 'action',
        id: 'refresh',
        label: 'Refresh',
        onClick: refreshData
      }
    ]
  }),
  new ToastWidget()
];

The widgets package does not reimplement these components. It forwards deck.gl lifecycle and interaction hooks to the PanelComponent owned by the panels package.