Docs
API Docs

Components

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

Buttons

Cards

ToolbarItem

Dialogs

Checkbox

ColorItem

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