Skip to main content

StudioSettingsWidget

from v9.3

StudioSettingsWidget helpers create and update a floating deck widget around StudioSettingsPanel.

Import​

import {
  createStudioSettingsWidget,
  updateStudioSettingsWidget,
  type StudioSettingsWidgetProps
} from '@deck.gl-community/widgets';

Usage​

const widget = createStudioSettingsWidget({
  schema,
  settings,
  onSettingsChange,
  placement: 'top-left'
});

deck.setProps({widgets: [widget]});

createStudioSettingsWidget returns a ModalPanelWidget configured as a non-blocking floating modal. It uses the Studio panel's header as the drag handle and hides the modal chrome close button because the panel renders its own close action.

Updating​

updateStudioSettingsWidget(widget, {
  schema,
  settings: nextSettings,
  onSettingsChange
});

Use updateStudioSettingsWidget when the schema or settings snapshot changes and the deck widget instance should be preserved.