ToolbarItem
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:
{
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.
import React from "react";
import styled, { css } from "styled-components";
import { CustomToolbarItemProps, AdvancedUIToolbarItem } from "photoeditorsdk";
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
custom: {
components: {
advancedUIToolbarItem: AdvancedUIToolbarItem,
}
}