Skip to main content
PESDK/Web/Customization/Components

ColorItem

PhotoEditor SDK for Web can be customized easily.

This will replace the items which are used to select a color in the Text, Text Design, Sticker, Frame and Brush tool. Available in both AdvancedUI and BasicUI.

Exported ColorItem components#

The following components are available in the photoeditorsdk package and can be customised to fit your needs.

  • ColorItem: This is the coloritem component which is used by default in the editor
  • ColorItemBase: This is a container which will handle the onClick behaviour
  • ColorItemBackground: This component will display the current color
  • ColorItemTiledBackground: This component will display the tiled background for transparent colors
  • ColorItemActiveOverlay: This component will display the border around the ColorItem

Examples#

The React component will receive the following props:

{
  tool: Tool
  color: string
  label: string
  isActive: boolean
  isDisabled: boolean
  tiledBackgroundUrl: string
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
}

Modifying the default ColorItem#

import React from 'react';


import { ColorItem, CustomColorItemProps } from 'photoeditorsdk';
import styled from 'styled-components';


const CustomColorItem = styled(ColorItem)<CustomColorItemProps>`
  margin: 8px;
`;


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

Building your own ColorItem#

import React from 'react';


import {
  CustomColorItemProps,
  CustomConfiguration,
  ColorItemActiveOverlay,
  ColorItemBase,
  ColorItemBackground,
  ColorItemTiledBackground,
} from 'photoeditorsdk';
import styled from 'styled-components';


const ActiveOverlay = styled(ColorItemActiveOverlay)`
  box-sizing: content-box;
  padding: 2px;
  left: -4px;
  top: -4px;
`;


export const CustomColorItem: React.FC<CustomColorItemProps> = ({
  label,
  color,
  isActive,
  isDisabled,
  tiledBackgroundUrl,
  onClick,
}) => {
  return (
    <ColorItemBase onClick={onClick} disabled={isDisabled} aria-label={label}>
      <ColorItemBackground color={color} />
      <ColorItemTiledBackground url={tiledBackgroundUrl} />
      <ActiveOverlay isActive={isActive} />
    </ColorItemBase>
  );
};


const editor = await PhotoEditorSDKUI.init({
  custom: {
    measurements: {
      colorItem: {
        size: 28,
      },
    },
    themes: {
      dark: {
        colorItem: {
          borderRadius: '50%',
          margin: '6px',
        },
      },
    },
    components: {
      colorItem: CustomColorItem,
    },
  },
});

Default configuration#

custom: {
  components: {
    colorItem: ColorItem,
  }
}