Context Menu

ContextMenu is UI component that will be rendered on the right click on the page.

How to customize ContextMenu?

You can pass ContextMenu component into <Workspace /> to overwrite the default one.
Warning: you will have to fully control every aspect of the context menu.

import { observer } from 'mobx-react-lite';
import Workspace from 'polotno/canvas/workspace';
import { observer } from 'mobx-react-lite';

const ContextMenu = ({ store }) => {
  return <div>MyContextMenu</div>
}

const App = ({ store }) => {
  return (
    <div
      style={{
        display: 'flex',
        height: '100%',
        margin: 'auto',
        flex: 1,
        flexDirection: 'column',
        position: 'relative',
      }}
    >
      <Workspace
        store={store}
        components={{
          ContextMenu,
        }}
      />
    </div>
  );
};

How to disable ContextMenu?

You can pass ContextMenu component that renders null to disable it.

import Workspace from 'polotno/canvas/workspace';

const ContextMenu = () => null;

const App = ({ store }) => {
  return (
    <div
      style={{
        display: 'flex',
        height: '100%',
        margin: 'auto',
        flex: 1,
        flexDirection: 'column',
        position: 'relative',
      }}
    >
      <Workspace store={store} components={{ ContextMenu }} />
    </div>
  );
};