Skip to main content
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:

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

{
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#

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.advancedSpacer}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#

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#

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#

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