Skip to main content

SettingsPanel

from v9.3

SettingsPanel embeds the settings-schema UI inside the panel composition model.

Usage​

Use SettingsPanel when a settings form should live inside a panel layout or panel container.

import {
  SettingsPanel,
  type SettingsPanelFontSize,
  type SettingsPanelProps,
  type SettingDescriptor,
  type SettingsSchema,
  type SettingsState
} from '@deck.gl-community/panels';

Props​

type SettingsPanelProps = {
  id?: string;
  label?: string;
  schema?: SettingsSchema;
  settings?: SettingsState;
  onSettingsChange?: (
    settings: SettingsState,
    changedSettings?: Array<{
      name: string;
      previousValue: unknown;
      nextValue: unknown;
      descriptor?: SettingDescriptor;
    }>
  ) => void;
  fontSize?: SettingsPanelFontSize;
  theme?: 'inherit' | 'light' | 'dark' | 'invert';
};

Settings schema descriptors may include group for richer panels, persist: 'local-storage' | 'url' | 'none' for manager persistence policy, and numeric descriptors may include sliderDebounceMs to apply a trailing debounce to range-slider input events while keeping direct numeric entry immediate. Select options may be raw primitive values or {label, value, description?} objects; description renders below the option label in the open menu. multi-select descriptors render a searchable string selector and preserve selected values that are not present in the current option list so callers can still clear stale selections. Set fontSize when labels and text, number, select, or multi-select controls need a larger or smaller supported text size; open select menu options use the same size.

See Also​

Remarks​

  • Reuses the shared schema-driven controls as a panel.
  • Tracks section collapse state while the panel stays mounted.
  • Supports nested dot-path setting names and change descriptors in onSettingsChange.
  • Pair with SettingsManager when settings snapshots should emit structured change descriptors or persist through local storage.