Toolbar

The Toolbar will display the ToolbarItems which are used to switch between tools.

Exported Toolbar components#

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

• AdvancedUIToolbar: The container for the ToolbarItems in the AdvancedUI
• BasicUIToolbar: The container for the ToolbarItemsin the BasicUI

AdvancedUI#

The React component will receive the following props:

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

Disable the AdvancedUI Toolbar#

Some use cases only require one Tool which makes the Toolbar redundant and the following snippet will show you how to disable it.

import React from 'react';

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      advancedUIToolbar: null,
    },
    measurements: {
      advancedUIToolbar: {
        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 Toolbar#

Some use cases only require one Tool which makes the Toolbar redundant and the following snippet will show you how to disable it.

import React from 'react';

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      basicUIToolbar: null,
    },
    measurements: {
      basicUIToolbar: {
        openHeight: 0,
        closeHeight: 0,
      },
    },
  },
});

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

Default configuration#

custom: {
  components: {
    advancedUIToolbar: AdvancedUIToolbar,
    basicUIToolbar: BasicUIToolbar,
  }
}