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

Cards

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 styled from "styled-components";
import { CustomCardProps, AdvancedUIItemCard, Tool } from "photoeditorsdk";

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