PESDK/Web/Customization/Components

Overview

PhotoEditor SDK for Web can be customized easily. Learn how to quickly modify your editor to fit your needs.

One of the main features of PhotoEditorSDK is the capability to customize the colors and fonts and different components of the UI.

Please refer to the nomenclature for a better understanding of the naming convention.

Available Custom Components#

Styling#

The custom components are also part of the styled-components theme context and can use the values which are defined in the theme.

JavaScript


import { Buttons } from 'photoeditorsdk';
import styled from 'styled-components';

const ExportButton = styled(Buttons.ContainedPrimaryButton)`
  color: ${({ theme }) => theme.button.containedPrimaryForeground}
  background: ${({ theme }) => theme.button.containedPrimaryBackground}
`;

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      buttons: {
        mainCanvasActionExport: ExportButton,
      },
    },
  },
});

It is also possible to style the default components through the className or style props.

Replacing Components#

The components in the the configuration can be replaced by any React component and will receive the same props as the default components.

The photoeditorsdk package exports all default components which makes it quite easy to modify the behaviour of certain parts of the app.

e.g.:

JavaScript


import { AdvancedUIItemCard } from 'photoeditorsdk';

const ItemCard = ({ onClick, tool, ...props }) => {
  const handleClick = () => {
    if (tool === 'sticker') {
      // add your custom click handeling here
    }
    onClick();
  };

  return <AdvancedUIItemCard {...props} onClick={handleClick} tool={tool} />;
};

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      advancedUIItemCard: ItemCard,
    },
  },
});