PESDK/Web/Customization/Components

Cards

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

Cards are used to display a preview of the Filter, Text Design or Sticker a user can apply to the image.

Exported Cards#

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

AdvancedUICategoryCard: This is the CategoryCard which is used by default in the editor.
AdvancedUIItemCard: This is the ItemCard which is used by default in the editor.
AdvancedUICardLabel: This component is used to display the label or authorName.
CardAvatar: This component will accept an url and display an avatar.

Examples#

Category Card in AdvancedUI#

The CategoryCards are used to group a number of items under a specific category which can be opened or closed.

The React component will receive the following props:

TypeScript


{
  tool: Tool
  label: string
  image?: string
  isActive?: boolean
  type: CardType
  isDisabled?: boolean
  onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
}

JavaScript


import React from "react";
import styled from "styled-components";
import { CustomCardProps, AdvancedUICategoryCard } from "photoeditorsdk";

const Card = styled(AdvancedUICategoryCard)`
  height: 50px;
  width: 180px;
  border-radius: 16px;
  margin-bottom: 16px;
`;

const Label = styled.div<{ isActive: boolean | void }>`
  width: 180px;
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
  color: ${(props) =>
    props.isActive ? props.theme.primary : props.theme.card.labelForeground};
`;

const CategoryCard: React.FC<CustomCardProps> = ({
  label,
  isActive,
  children,
  ...props
}) => (
  <div>
    <Label isActive={isActive}>{label}</Label>
    <Card {...props} isActive={isActive} />
  </div>
);

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

Item Card in AdvancedUI#

This will replace the item cards in the toolControlBar.

The React component will receive the following props:

TypeScript


{
  tool: Tool
  label?: string
  authorName?: string
  authorAvatar?: string
  image?: string
  isActive?: boolean
  type: CardType
  isDisabled?: boolean
  onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
}

Changing the overall look of the ItemCard#

JavaScript


import React from 'react';

import { CustomCardProps, AdvancedUIItemCard, Tool } from 'photoeditorsdk';
import styled from 'styled-components';

const Container = styled.div`
  margin-bottom: 10px;
  &:nth-child(2n + 1) {
    margin-right: ${props =>
      props.theme.measurements.advancedUISpacer}px !important;
  }
`;

const CardStyles = styled(AdvancedUIItemCard).attrs(props => {
  const style: any = {};
  if (props.image) {
    style.backgroundImage = `url(${props.image})`;
  }
  if (props.isActive) {
    style.border = `2px solid ${props.theme.primary}`;
  }
  return { style };
})`
  height: 87px;
  width: 87px;
  padding: 5px;
  border-radius: 50%;
  margin-right: 0px !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-clip: content-box;
`;

const Label = styled.div`
  max-width: 80px;
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
`;

const ItemCard: React.FC<CustomCardProps> = ({
  label,
  children,
  tool,
  style,
  ...props
}) => {
  if (tool === Tool.FRAME && style) {
    style.backgroundSize = '55%';
  }

  return (
    <Container>
      <CardStyles {...props} tool={tool} style={style} />
      <Label>{label}</Label>
    </Container>
  );
};

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

Customizing the Author Information in the Library#

JavaScript


export const ItemCard: React.FC<CustomItemCardProps> = ({
  label,
  children,
  tool,
  style,
  ...props
}) => {
  if (tool === Tool.LIBRARY) {
    const { authorName, authorAvatar } = props as CustomItemCardProps<
      Tool.LIBRARY
    >;
    return (
      <AdvancedUIItemCard {...props} label={label} tool={tool} style={style}>
        {authorAvatar && <CardAvatar url={authorAvatar} />}
        {authorName && (
          <AdvancedUICardLabel withBackground>{authorName}</AdvancedUICardLabel>
        )}
      </AdvancedUIItemCard>
    );
  }

  return (
    <AdvancedUIItemCard {...props} label={label} tool={tool} style={style}>
      {children}
    </AdvancedUIItemCard>
  );
};

Removing the Author Information in the Library#

JavaScript


export const ItemCard: React.FC<CustomItemCardProps> = ({
  label,
  children,
  tool,
  style,
  ...props
}) => {
  if (tool === Tool.LIBRARY) {
    const { authorName, authorAvatar } = props as CustomItemCardProps<
      Tool.LIBRARY
    >;
    return (
      <AdvancedUIItemCard {...props} label={label} tool={tool} style={style} />
    );
  }

  return (
    <AdvancedUIItemCard {...props} label={label} tool={tool} style={style}>
      {children}
    </AdvancedUIItemCard>
  );
};

Default configuration#

JavaScript


custom: {
  components: {
    advancedUICategoryCard: AdvancedUICategoryCard,
    advancedUIItemCard: AdvancedUIItemCard,
  }
}