Looking for
or
?
We've rebranded!
v5.8
v5.7
v5.11
v5.10
v5
v4
v3.6
API Docs

Checkbox

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:

{
  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 styled from "styled-components";
import { Checkbox, CustomCheckboxProps } from "photoeditorsdk";

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 styled from "styled-components";
import {
  CustomCheckbox,
  CheckboxCheckMark,
  CheckboxBase,
  CheckboxInput,
  Label,
} from "photoeditorsdk";

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