Skip to main content

ToolbarItem

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 ToolbarItem is used to display an icon for every available tool in the Toolbar.

Exported Item#

The following item component is available in the photoeditorsdk package and can be customised to fit your needs.

  • AdvancedUIToolbarItem: This is the ToolbarItem which is used by default in the editor.

Example#

The React component will receive the following props:

Typescript
{
tool: string
label: string
icon: React.ReactNode
isActive: boolean
isReverse: boolean
style?: React.CSSProperties
onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
}

Toolbar Item in AdvancedUI#

You can choose to use the default icons or replace them with your own icons.

JavaScript
import React from 'react';
import { CustomToolbarItemProps, AdvancedUIToolbarItem } from 'photoeditorsdk';
import styled, { css } from 'styled-components';
const Item = styled(AdvancedUIToolbarItem)`
height: 48px;
width: 48px;
margin: 4px;
* button {
border-radius: 50%;
background: transparent;
color: ${props => props.theme.foreground};
}
${props => {
if (props.isActive) {
return css`
* button {
color: white !important;
background: ${props.theme.primary};
}
`;
}
return '';
}}
`;
const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const Label = styled.div`
max-width: 48px;
text-align: center;
font-size: 12px;
margin-bottom: 10px;
margin: 4px;
`;
const ToolbarItem: React.FC<CustomToolbarItemProps> = ({
label,
isActive,
...props
}) => {
return (
<Container>
<Item label={label} isActive={isActive} {...props} />
<Label>{label}</Label>
</Container>
);
};
const editor = await PhotoEditorSDKUI.init({
custom: {
measurements: {
advancedUIToolbar: {
width: 80,
},
},
components: {
advancedUIToolbarItem: ToolbarItem,
},
},
});

Default configuration#

JavaScript
custom: {
components: {
advancedUIToolbarItem: AdvancedUIToolbarItem,
}
}