ColorItem
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 checkbox 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 editorColorItemBase
: This is a container which will handle theonClick
behaviourColorItemBackground
: This component will display the current colorColorItemTiledBackground
: This component will display the tiled background for transparent colorsColorItemActiveOverlay
: This component will display the border around theColorItem
Examples
The React component will receive the following props:
{
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 styled from "styled-components";
import { ColorItem, CustomColorItemProps } from "photoeditorsdk";
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 styled from "styled-components";
import {
CustomColorItemProps,
CustomConfiguration,
ColorItemActiveOverlay,
ColorItemBase,
ColorItemBackground,
ColorItemTiledBackground,
} from "photoeditorsdk";
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,
}
}