Examples › Basic configuration

The ContextMenuProvider component accepts the following props that are used as default values for the context menu container:

zIndex → number; defaults to 9999
shadow → a MantineShadow value; see Mantine Paper documentation; defaults to sm
borderRadius → a MantineNumberSize value; see Mantine Paper documentation; defaults to xs

<MantineProvider>
  <ContextMenuProvider zIndex={1000} shadow="md" borderRadius="md">
    <Component {...pageProps} />
  </ContextMenuProvider>
</MantineProvider>

These props are used as default values for the context menu and you can override them by passing the same props as the second argument to the showContextMenu function returned by the useContextMenu hook:

const showContextMenu = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu(
      [
        {
          key: 'copy',
          onClick: () => copyImageToClipboard(src),
        },
        {
          key: 'download',
          onClick: () => downloadImage(src),
        },
      ],
      { zIndex: 1000, shadow: 'md', borderRadius: 'md' }
    )}
  />
);