Dockview
    Preparing search index...

    Interface IDockviewReactProps

    interface IDockviewReactProps {
        components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;
        defaultTabComponent?: FunctionComponent<IDockviewPanelHeaderProps>;
        getTabContextMenuItems?: (
            params: GetTabContextMenuItemsParams,
        ) => (ReactContextMenuItemConfig | BuiltInContextMenuItem)[];
        getTabGroupChipContextMenuItems?: (
            params: GetTabGroupChipContextMenuItemsParams,
        ) => (ReactContextMenuItemConfig | BuiltInChipContextMenuItem)[];
        groupDragGhostComponent?: FunctionComponent<IDockviewGroupDragGhostProps>;
        leftHeaderActionsComponent?: FunctionComponent<IDockviewHeaderActionsProps>;
        onDidDrop?: (event: DockviewDidDropEvent) => void;
        onReady: (event: DockviewReadyEvent) => void;
        onWillDrop?: (event: DockviewWillDropEvent) => void;
        prefixHeaderActionsComponent?: FunctionComponent<
            IDockviewHeaderActionsProps,
        >;
        rightHeaderActionsComponent?: FunctionComponent<
            IDockviewHeaderActionsProps,
        >;
        tabComponents?: Record<
            string,
            FunctionComponent<IDockviewPanelHeaderProps>,
        >;
        tabGroupChipComponent?: FunctionComponent<IDockviewTabGroupChipProps>;
        watermarkComponent?: FunctionComponent<IWatermarkPanelProps>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    components defaultTabComponent? getTabContextMenuItems? getTabGroupChipContextMenuItems? groupDragGhostComponent? leftHeaderActionsComponent? onDidDrop? onReady onWillDrop? prefixHeaderActionsComponent? rightHeaderActionsComponent? tabComponents? tabGroupChipComponent? watermarkComponent?

    Properties

    components: Record<string, React.FunctionComponent<IDockviewPanelProps>>
    defaultTabComponent?: FunctionComponent<IDockviewPanelHeaderProps>
    getTabContextMenuItems?: (
        params: GetTabContextMenuItemsParams,
    ) => (ReactContextMenuItemConfig | BuiltInContextMenuItem)[]

    Return the items to display in the tab context menu on right-click.

    Use built-in string shortcuts or provide a ContextMenuItemConfig object for custom items. The available shortcuts are:

    • 'close': close this panel
    • 'closeOthers': close every other panel in the group
    • 'closeAll': close every panel in the group
    • 'closeLeft' / 'closeRight': close the panels before / after this one in the tab strip
    • 'maximize': maximize the group (renders as Restore and disables for non-grid panels, tracking the group's live maximized state)
    • 'float': move the panel into a floating window (disabled when already floating)
    • 'popout': move the panel into a new browser window (disabled when already popped out)
    • 'pin': toggle the panel's pinned state (PinnedTabs module)
    • 'separator': a divider line

    If omitted, no context menu is shown. Return an empty array to suppress the menu for specific cases.

    getTabGroupChipContextMenuItems?: (
        params: GetTabGroupChipContextMenuItemsParams,
    ) => (ReactContextMenuItemConfig | BuiltInChipContextMenuItem)[]

    Return the items to display in the tab group chip context menu on right-click.

    Use built-in string shortcuts or provide a ContextMenuItemConfig object for custom items. The available shortcuts are:

    • 'rename': renders an inline text input to rename the tab group
    • 'colorPicker': renders a grid of color swatches for the tab group
    • 'collapse': collapse the tab group (renders as Expand when the group is already collapsed)
    • 'close': close every panel belonging to the tab group
    • 'separator': a divider line

    If omitted, no context menu is shown on chip right-click. Return an empty array to suppress the menu for specific cases.

    groupDragGhostComponent?: FunctionComponent<IDockviewGroupDragGhostProps>

    Component rendered as the drag ghost (the small floating chip) while a group of panels is being dragged. If omitted, the default "Multiple Panels (N)" ghost is used.

    Note: the ghost is captured by the browser at drag start, so the component must render fast / synchronously enough to be visible before the browser snapshots it.

    leftHeaderActionsComponent?: FunctionComponent<IDockviewHeaderActionsProps>
    onDidDrop?: (event: DockviewDidDropEvent) => void
    onReady: (event: DockviewReadyEvent) => void
    onWillDrop?: (event: DockviewWillDropEvent) => void
    prefixHeaderActionsComponent?: FunctionComponent<IDockviewHeaderActionsProps>
    rightHeaderActionsComponent?: FunctionComponent<IDockviewHeaderActionsProps>
    tabComponents?: Record<string, FunctionComponent<IDockviewPanelHeaderProps>>
    tabGroupChipComponent?: FunctionComponent<IDockviewTabGroupChipProps>
    watermarkComponent?: FunctionComponent<IWatermarkPanelProps>

    Settings

    Member Visibility

    On This Page

    Properties