Skip to main content
PESDK/Web/Customization/Components

Dialogs

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

The Dialog component allows the customisation of all InfoModals, WarningModals, ErrorModals and the TextEditModal. For example this can be used to modify the Loader with the Spinner, the Modal with the text input field for the Text and Text Design tool or the unsaved changes Dialog right before the editor is closed. Available in both AdvancedUI and BasicUI.

Exported Dialog components#

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

  • DialogBase: This is a container around the child components
  • DialogBackdrop: This component will create an opacity layer above the editor ui
  • DialogContainer: This component defines the dimensions and color of the dialog
  • DialogHeader: The header should contain the title of the dialog
  • DialogBody: This component contains the main content of the dialog
  • DialogFooter: The component contains the buttons to confirm or dismiss a dialog
  • DialogSpinner: This spinner component can be used to display a loading state

Examples#

The React component will receive the following props:

{
isVisible?: boolean
identifier: ModalIdentifier
type: ModalType
height?: string
width?: string
position: { x: number; y: number }
confirmLabel?: string
dismissLabel?: string
headerLabel?: string
bodyLabel?: string
isConfirmDisabled?: boolean
isDismissDisabled?: boolean
handleClose: () => void
handleConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => void
handleDismiss?: (e?: React.MouseEvent<HTMLButtonElement>) => void
className?: string
style?: React.CSSProperties
header?: React.ReactNode
body?: React.ReactNode
footer?: React.ReactNode
children?: React.ReactNode
}

Place the Dialogs in the center of the Editor#

import React from 'react';
import { CustomDialogProps, Dialog } from 'photoeditorsdk';
const CustomDialog = ({ position, children, ...props }: CustomDialogProps) => {
const centerPosition = { x: 0, y: 0 };
return (
<Dialog {...props} position={centerPosition}>
{children}
</Dialog>
);
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
dialog: CustomDialog,
},
},
});

Modify the loading dialogs with spinner#

import React from 'react';
import { CustomDialogProps, Dialog } from 'photoeditorsdk';
const Container = styled(DialogBody)`
display: flex;
flex-direction: row;
align-items: center;
`;
const Message = styled.div`
display: flex;
flex-direction: column;
margin-left: 8px;
@media all and (min-width: 640px) {
margin-left: 30px;
}
`;
const Loader: React.FC<CustomDialogProps> = ({
headerLabel,
bodyLabel,
body,
children,
...props
}) => {
return (
<Dialog
{...props}
height="initial"
header={<DialogHeader>{headerLabel}</DialogHeader>}
>
<Container>
<DialogSpinner />
<Message>{bodyLabel}</Message>
</Container>
</Dialog>
);
};
export const CustomDialog: React.FC<CustomDialogProps> = ({
type,
...props
}) => {
if (type === ModalType.INFO) {
return <Loader {...props} type={type} />;
}
return <Dialog {...props} type={type} />;
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
dialog: CustomDialog,
},
},
});

Build your own Dialogs#

import React from 'react';
import {
CustomDialogProps,
ModalType,
Dialog,
DialogSpinner,
DialogHeader,
DialogBody,
DialogFooter,
TextSecondaryButton,
TextPrimaryButton,
} from 'photoeditorsdk';
import styled from 'styled-components';
const Container = styled(DialogBody)`
display: flex;
flex-direction: row;
align-items: center;
`;
const Message = styled.div`
display: flex;
flex-direction: column;
margin-left: 8px;
@media all and (min-width: 640px) {
margin-left: 30px;
}
`;
const Footer = styled(DialogFooter)`
border-top: none;
`;
const ErrorDialog = styled(Dialog)`
border-radius: 16px;
background-color: red;
`;
const Loader: React.FC<CustomDialogProps> = ({
headerLabel,
bodyLabel,
body,
children,
...props
}) => {
return (
<Dialog
{...props}
height="initial"
header={<DialogHeader>{headerLabel}</DialogHeader>}
>
<Container>
<DialogSpinner />
<Message>{bodyLabel}</Message>
</Container>
</Dialog>
);
};
const EditText: React.FC<CustomDialogProps> = ({
type,
headerLabel,
dismissLabel,
handleDismiss,
isConfirmDisabled,
confirmLabel,
handleConfirm,
header,
body,
footer,
children,
...props
}) => {
return (
<Dialog {...props} type={type} style="height: 300px">
<DialogHeader>{headerLabel}</DialogHeader>
{body}
<Footer type={type}>
{handleDismiss && (
<TextSecondaryButton
label={dismissLabel}
ariaLabel={dismissLabel}
onClick={handleDismiss}
/>
)}
{handleConfirm && (
<TextPrimaryButton
label={confirmLabel}
ariaLabel={confirmLabel}
isDisabled={isConfirmDisabled}
onClick={handleConfirm}
/>
)}
</Footer>
</Dialog>
);
};
const Error: React.FC<CustomDialogProps> = ({ children, ...props }) => (
<ErrorDialog {...props}>{children}</ErrorDialog>
);
export const CustomDialog: React.FC<CustomDialogProps> = ({
type,
...props
}) => {
if (type === ModalType.INFO) {
return <Loader {...props} type={type} />;
}
if (type === ModalType.TEXT_EDIT) {
return <EditText {...props} type={type} />;
}
if (type === ModalType.ERROR) {
return <Error {...props} type={type} />;
}
return <Dialog {...props} type={type} />;
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
dialog: CustomDialog,
},
},
});

Default configuration#

custom: {
components: {
dialog: Dialog,
}
}