Examples › Multiple targets | Mantine ContextMenu

Examples › Multiple targets

Since its component tree is only created when you right-click on a target element and destroyed when hidden, implementing the context menu functionality on multiple target will not result in performance issues.

In the example below, a single context menu instance is generated when needed and destroyed when hidden:

// 👇 the same function will be used for multiple components
const { showContextMenu } = useContextMenu();

return (
  <Grid>
    {images.map((image, index) => (
      <GridCol span={{ xs: 4 }} key={index}>
        <Picture
          image={image}
          onContextMenu={showContextMenu([
            {
              key: 'copy',
              icon: <IconCopy size={16} />,
              onClick: () => copyImageToClipboard(image.file.src),
            },
            {
              key: 'download',
              icon: <IconDownload size={16} />,
              onClick: () => downloadImage(image.file.src),
            },
            { key: 'divider' },
            {
              key: 'author',
              icon: <IconLink size={16} />,
              title: `Open ${image.author.name}’s profile`,
              onClick: () => window.open(`https://unsplash.com/@${image.author.profile}`, '_blank'),
            },
          ])}
        />
      </GridCol>
    ))}
  </Grid>
);