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