Skip to main content
PESDK/Web/Customization/Components

Checkbox

PhotoEditor SDK for Web can be customized easily. Learn how to quickly set up your editor in the proper language for your target audience.

This will replace all checkboxes which are used in the PhotoeditorSDK. Available in both AdvancedUI and BasicUI.

The PhotoEditorSDK exports the default Checkbox and also all components which are used to build the Checkbox.

Exported checkbox parts#

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

  • Checkbox: This is the checkbox component which is used by default in the editor
  • CheckboxBase: This is a container around the child components
  • CheckboxCheckMark: This component will display the checkmark
  • CheckboxInput: This component is used for accessibility
  • Label: This component will display the label next to the checkmark and is also clickable

Examples#

The React component will receive the following props:

{
  tool: Tool
  label: string
  value: boolean
  isDisabled?: boolean
  checkMarkPosition?: 'left' | 'right'
  onClick: (e?: React.SyntheticEvent) => void
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
}

Modifying the default Checkbox#

import React from 'react';


import { Checkbox, CustomCheckboxProps } from 'photoeditorsdk';
import styled from 'styled-components';


const CustomCheckbox = styled(Checkbox)<CustomCheckboxProps>`
  margin: 8px;
`;


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

Building your own Checkbox#

import React from 'react';


import {
  CustomCheckbox,
  CheckboxCheckMark,
  CheckboxBase,
  CheckboxInput,
  Label,
} from 'photoeditorsdk';
import styled from 'styled-components';


const Base = styled(CheckboxBase)`
  justify-content: unset;
`;


const CheckMark = styled(CheckboxCheckMark)`
  margin-right: 8px;
`;


const Checkbox: CustomCheckbox = ({
  label,
  value,
  isDisabled,
  onClick,
  ...props
}) => {
  const id = `photoeditorsdk-${label.replace(' ', '-')}`;


  const onChange = () => {
    onClick();
  };


  return (
    <Base {...props}>
      <CheckMark isDisabled={isDisabled} isChecked={value} onClick={onClick} />
      <Label isDisabled={isDisabled} label={label} htmlFor={id} />
      <CheckboxInput
        id={id}
        disabled={isDisabled}
        checked={value}
        onChange={onChange}
      />
    </Base>
  );
};


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

Default configuration#

custom: {
  components: {
    checkbox: Checkbox,
  }
}