Customizing Resize Panel

How to set your own default page sizes?

If you don't like default size panel, you cal always make your own from scratch. You just need to define new Sizes section. In can be like this:

import { observer } from 'mobx-react-lite';
import { SectionTab } from 'polotno/side-panel';
import { Button } from '@blueprintjs/core';
import { GiResize } from 'react-icons/gi';

const AVAILABLE_SIZES = [
  { width: 500, height: 500 },
  { width: 1000, height: 1000 },
  { width: 1500, height: 1500 },
];

// define the new custom section
const CustomSizesPanel = {
  name: 'sizes',
  Tab: (props) => (
    <SectionTab name="Sizes" {...props}>
      <GiResize icon="new-text-box" />
    </SectionTab>
  ),
  // we need observer to update component automatically on any store changes
  Panel: observer(({ store }) => {
    // we will just render buttons for each size
    // but you also can add your own controls
    // size inputs, etc
    return (
      <div>
        {AVAILABLE_SIZES.map(({ width, height }, i) => (
          <Button
            key={i}
            style={{ width: '100%', marginBottom: '20px' }}
            onClick={() => {
              store.setSize(width, height);
            }}
          >
            {width}x{height}
          </Button>
        ))}
      </div>
    );
  }),
};

Open Demo