Looking for
or
?
We've rebranded!
v5.8
v5.7
v5.6
v5.11
v5
v4
v3.6
API Docs

ToolbarItem

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 styled, { css } from "styled-components";

import { CustomToolbarItemProps, AdvancedUIToolbarItem } from "photoeditorsdk";

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,
  }
}