Mantine ContextMenu

Source code17.7k/monthSponsor

Examples › Custom content

You can also display custom content in the context menu by providing a render callback to theshowContextMenu function instead of an array of items.
The render callback will receive a closefunction that you can use to close the menu.
Have a look at the example below to see how it works:

'use client';

import { Flex } from '@mantine/core';
import { IconCopy, IconDownload, IconFlipHorizontal, IconFlipVertical } from '@tabler/icons-react';
import { useContextMenu } from 'mantine-contextmenu';
import { useState } from 'react';
import { Picture } from '~/components/Picture';
import { copyImageToClipboard, downloadImage, unsplashImages } from '~/lib/images';
import { FancyButton } from './FancyButton';

export function CustomContentExample() {
  const { showContextMenu } = useContextMenu();

  const [flipVertical, setFlipVertical] = useState(false);
  const [flipHorizontal, setFlipHorizontal] = useState(false);
  const image = unsplashImages[7];
  const { src } = image.file;
  return (
    <Picture
      image={image}
      flipVertical={flipVertical}
      flipHorizontal={flipHorizontal}
      onContextMenu={showContextMenu((close) => (
        <Flex wrap="wrap" w={200}>
          <FancyButton
            icon={<IconCopy size={16} />}
            text="Copy"
            onClick={() => {
              close();
              copyImageToClipboard(src);
            }}
          />
          <FancyButton
            icon={<IconDownload size={16} />}
            text="Download"
            onClick={() => {
              close();
              downloadImage(src);
            }}
          />
          <FancyButton
            icon={<IconFlipVertical size={16} />}
            text="Flip vertical"
            onClick={() => {
              close();
              setFlipVertical((v) => !v);
            }}
          />
          <FancyButton
            icon={<IconFlipHorizontal size={16} />}
            text="Flip horizontal"
            onClick={() => {
              close();
              setFlipHorizontal((v) => !v);
            }}
          />
        </Flex>
      ))}
    />
  );
}

Right-click on the image to trigger the context menu:

Picture by Kristina Yadykina | Mantine ContextMenu

Picture by Kristina Yadykina

Head over to the next example to discover other features.