Skip to main content

Custom images panel

How to load custom photos in the side panel?

Using customization API you can easily add new section to the side panel to display a set of images from any remote API or your own backend.

Open Demo

We can write another custom panel that will load images from any API:

import { observer } from 'mobx-react-lite';
export const PhotosPanel = observer(({ store }) => {
const [images, setImages] = React.useState([]);

async function loadImages() {
// here we should implement your own API requests
setImages([]);

// wait to emulate network request
await new Promise((resolve) => setTimeout(resolve, 3000));

// for demo images are hard coded
// in real app here will be something like JSON structure
setImages([
{ url: './carlos-lindner-zvZ-HASOA74-unsplash.jpg' },
{ url: './guillaume-de-germain-TQWJ4rQnUHQ-unsplash.jpg' },
]);
}

React.useEffect(() => {
loadImages();
}, []);

return (
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<InputGroup
leftIcon="search"
placeholder="Search..."
onChange={(e) => {
loadImages();
}}
style={{
marginBottom: '20px',
}}
/>
<p>Demo images: </p>
{/* you can create yur own custom component here */}
{/* but we will use built-in grid component */}
<ImagesGrid
images={images}
getPreview={(image) => image.url}
onSelect={async (image, pos, element, event) => {
// image - an item from your array
// pos - relative mouse position on drop. undefined if user just clicked on image
// element - model from your store if images was dropped on an element.
// Can be useful if you want to change some props on existing element instead of creating a new one
// event - will have additional data such as
// elements - list of all elements under the mouse
// page - page where user dropped the image
const { width, height } = await getImageSize(image.url);
store.activePage.addElement({
type: 'image',
src: image.url,
width,
height,
x: pos?.x || 0,
y: pos?.y || 0,
});
}}
rowsNumber={2}
isLoading={!images.length}
loadMore={false}
/>
</div>
);
});
// define the new custom section
const СustomPhotos = {
name: 'photos',
Tab: (props) => (
<SectionTab name="Photos" {...props}>
<MdPhotoLibrary />
</SectionTab>
),
Panel: PhotosPanel,
};