Side panel overview

SidePanel provides default set of components for adding new elements into the canvas, changing pages sizes, etc.

import { SidePanel } from 'polotno/side-panel';

const MyPanel = () => {
  return (
    <div>
      <SidePanel store={store} />
    </div>
  );
};

The SidePanel will automatically use full width and height of its parent; you don't have to manually adjust its size. You can just setup the size of parent <div> with CSS.

How to customize side panel tabs?

You can pass sections property to <SidePanel /> component to specify all available tabs manually. Here is the default UI:

import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';

const MyPanel = () => {
  return (
    <div>
      <SidePanel store={store} sections={DEFAULT_SECTIONS} />
    </div>
  );
};

And this is how you can define it manually:

import { observer } from 'mobx-react-lite';
import { SidePanel } from 'polotno/side-panel';
// import existing section
import { TextSection } from 'polotno/side-panel';

// import default tab component
import { SectionTab } from 'polotno/side-panel';
// import our own icon
import FaShapes from '@meronex/icons/fa/FaShapes';

// define the new custom section
const CustomSection = {
  name: 'custom',
  Tab: (props) => (
    <SectionTab name="Custom" {...props}>
      <FaShapes icon="new-text-box" />
    </SectionTab>
  ),
  // we need observer to update component automatically on any store changes
  Panel: observer(({ store }) => {
    return (
      <div>
        <p>Here we will define our own custom tab.</p>
        <p>Elements on the current page: {store.activePage?.children.length}</p>
      </div>
    );
  }),
};

// we will have just two sections
const sections = [CustomSection, TextSection];

const CustomSidePanel = () => {
  return (
    <SidePanel store={store} sections={sections} defaultSection="custom" />
  );
};