Examples › Custom content

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

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/image';
import FancyButton from './FancyButton';

export default 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>
      ))}
    />
  );
}

import { Box, Text, createStyles } from '@mantine/core';
import type { ReactNode } from 'react';

const useStyles = createStyles((theme) => {
  const border = `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4]}`;
  return {
    root: {
      width: '50%',
      height: 60,
      padding: 0,
      borderRadius: 0,
      cursor: 'pointer',
      background: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
      transition: 'background 0.25s ease',
      border: 0,
      '&:nth-child(2n)': { borderLeft: border },
      '&:nth-child(n+3)': { borderTop: border },
      '&:hover': {
        background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.fn.rgba(theme.black, 0.1),
      },
    },
  };
});

export type FancyButtonProps = {
  icon: ReactNode;
  text: string;
  onClick: () => void;
};

export default function FancyButton({ icon, text, onClick }: FancyButtonProps) {
  const { classes } = useStyles();
  return (
    <Box className={classes.root} component="button" onClick={onClick}>
      {icon}
      <Text size="xs">{text}</Text>
    </Box>
  );
}