Skip to main content
PESDK/Web/Customization/Components

ToolbarItem

PhotoEditor SDK for Web can be customized easily. Learn how to quickly set up your editor in the proper language for your target audience.

The ToolbarItem is used to display an icon for every available tool in the Toolbar.

Exported Item#

The following item component is available in the photoeditorsdk package and can be customised to fit your needs.

  • AdvancedUIToolbarItem: This is the ToolbarItem which is used by default in the editor.

Example#

The React component will receive the following props:

{
  tool: string
  label: string
  icon: React.ReactNode
  isActive: boolean
  isReverse: boolean
  style?: React.CSSProperties
  onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
}

Toolbar Item in AdvancedUI#

You can choose to use the default icons or replace them with your own icons.

import React from 'react';


import { CustomToolbarItemProps, AdvancedUIToolbarItem } from 'photoeditorsdk';
import styled, { css } from 'styled-components';


const Item = styled(AdvancedUIToolbarItem)`
  height: 48px;
  width: 48px;
  margin: 4px;
  * button {
    border-radius: 50%;
    background: transparent;
    color: ${props => props.theme.foreground};
  }
  ${props => {
    if (props.isActive) {
      return css`
        * button {
          color: white !important;
          background: ${props.theme.primary};
        }
      `;
    }
    return '';
  }}
`;


const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;


const Label = styled.div`
  max-width: 48px;
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
  margin: 4px;
`;


const ToolbarItem: React.FC<CustomToolbarItemProps> = ({
  label,
  isActive,
  ...props
}) => {
  return (
    <Container>
      <Item label={label} isActive={isActive} {...props} />
      <Label>{label}</Label>
    </Container>
  );
};


const editor = await PhotoEditorSDKUI.init({
  custom: {
    measurements: {
      advancedUIToolbar: {
        width: 80,
      },
    },
    components: {
      advancedUIToolbarItem: ToolbarItem,
    },
  },
});

Default configuration#

custom: {
  components: {
    advancedUIToolbarItem: AdvancedUIToolbarItem,
  }
}