ToolControlBar

The ToolControlBar will display the tool-specific controls and items.

Exported ToolControlBar components#

The following components are available in the photoeditorsdk package and can be customized to fit your needs.

• AdvancedUIToolControlBar: The container for the controls and items in the AdvancedUI
• BasicUIToolControlBar: The container for the controls in the BasicUI
• BasicUIToolItemsBar: The container for the items in the BasicUI

AdvancedUI#

The React component will receive the following props:

{
  reverse: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

Disable the AdvancedUI ToolControlBar#

Disabling the ToolControlBar in the AdvancedUI is only recommended for a small amount of use cases. If you only want to disable specific controls you should take a look at the tool-specific Toolbar Customization sections.

import React from 'react';

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      advancedUIToolControlBar: null,
    },
    measurements: {
      advancedUIToolControlBar: {
        width: 0,
      },
    },
  },
});

It is important to change the width value in the measurements object since some internal calculations depend on it.

BasicUI#

The React component will receive the following props:

{
  show: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

Disable the BasicUI ToolControlBar#

One use case for disabling the ToolControlBar in the BasicUI would be if your configuration is quite restrictive in regards to the available items. Disabling the ToolControlBar would prevent the user from changing values like the opacity or color.

import React from 'react';

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      basicUIToolControlBar: null,
    },
    measurements: {
      basicUIToolControlBar: {
        controlsBarHeight: 0,
      },
    },
  },
});

It is important to change the controlsBarHeight value in the measurements object since some internal calculations depend on it.

Disable the BasicUI ToolItemsBar#

Disabling the ToolItemsBar in the BasicUI is only recommended for small amount of use cases.

import React from 'react';

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      basicUIToolItemsBar: null,
    },
    measurements: {
      basicUIToolControlBar: {
        itemsBarHeight: 0,
        // basicUIToolControlBar.itemsBarHeight + basicUIToolbar.closeHeight + padding
        // default: 72 + 40 + 4
        maxHeight: 0 + 40 + 4,
      },
    },
  },
});

It is important to change the itemsBarHeight and maxHeight values in the measurements object since some internal calculations depend on it.

Default configuration#

custom: {
  components: {
    advancedUIToolControlBar: AdvancedUIToolControlBar,
    basicUIToolControlBar: BasicUIToolControlBar,
    basicUIToolItemsBar: BasicUIToolItemsBar,
  }
}