Skip to main content

Components

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

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.

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.:

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