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

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