SelectorWidget

This widget renders an icon button that opens a popover menu of selectable options. Each option provides an icon and an optional label, and the button updates to reflect the current selection.

JavaScript

import {Deck} from '@deck.gl/core';
import {SelectorWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

const deck = new Deck({
  widgets: [
    new SelectorWidget({
      initialValue: 'single',
      options: [
        {
          value: 'single',
          label: 'Single view',
          icon: './single.svg'
        },
        {
          value: 'split-horizontal',
          label: 'Split views horizontal',
          icon: './split-h.svg'
        },
        {
          value: 'split-vertical',
          label: 'Split views vertical',
          icon: './split-v.svg'
        }
      ],
      onChange: value => updateViews(value)
    })
  ]
});

TypeScript

import {Deck} from '@deck.gl/core';
import {SelectorWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

type ViewLayout = 'single' | 'split-horizontal' | 'split-vertical';

const deck = new Deck({
  widgets: [
    new SelectorWidget<ViewLayout>({
      initialValue: 'single',
      options: [
        {
          value: 'single',
          label: 'Single view',
          icon: './single.svg'
        },
        {
          value: 'split-horizontal',
          label: 'Split views horizontal',
          icon: './split-h.svg'
        },
        {
          value: 'split-vertical',
          label: 'Split views vertical',
          icon: './split-v.svg'
        }
      ],
      onChange: value => updateViews(value)
    })
  ]
});

React

import React from 'react';
import DeckGL, {SelectorWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

type ViewLayout = 'single' | 'split-horizontal' | 'split-vertical';

function App() {
  return (
    <DeckGL>
      <SelectorWidget<ViewLayout>
        initialValue="single"
        options={[
          {
            value: 'single',
            label: 'Single view',
            icon: './single.svg'
          },
          {
            value: 'split-horizontal',
            label: 'Split views horizontal',
            icon: './split-h.svg'
          },
          {
            value: 'split-vertical',
            label: 'Split views vertical',
            icon: './split-v.svg'
          }
        ]}
        onChange={value => updateViews(value)}
      />
    </DeckGL>
  );
}

Constructor

import {SelectorWidget, type SelectorWidgetProps} from '@deck.gl/widgets';
new SelectorWidget<ValueT>({} satisfies SelectorWidgetProps<ValueT>);

Types

SelectorWidgetProps

The SelectorWidget accepts the generic WidgetProps and:

options (SelectorWidgetOption[], required)

Selectable options displayed in the popover menu.

initialValue (any, optional)

• Default: value of the first option

Initial selected value. If it does not match any option, the first option is displayed.

onChange (function, optional)

(value: ValueT) => void

Callback invoked when a new option is selected.

SelectorWidgetOption

value (any, required)

Value returned from onChange when this option is selected.

icon (string, required)

Data URL used as the option icon mask.

label (string, optional)

Text shown in the menu and used as the button tooltip when selected.

Styles

The SelectorWidget uses the shared button and menu theme variables described in the styling guide.

Source

modules/widgets/src/selector-widget.tsx