dataKey

Description

Optional. Specifies the id of the elements to show Context Menu for

Usage

dataKey?: string;

Example

Here's how you can specify ContextMenu with the default dataKey:

import { useRef } from "react";
import ContextMenu from "./ContextMenu.jsx";

const resolver = (id: string) => id;

function Example({ options, items }) {
  const menuRef = useRef(null);

  return (
    <ContextMenu options={options} resolver={resolver} ref={menuRef}>
      {/* the resolver property enables the multi-area mode for the menu */}
      {/* a menu will appear for all items with the "data-context-id" attribute */}
      {items.map(item => (
        <div
          key={item.id}
          className="item"
          onClick={() => menuRef.current?.show()}
          data-context-id={item.id}
        />
      ))}
    </ContextMenu>
  );
}

The example below shows how to create ContextMenu with a custom dataKey:

import ContextMenu from "./ContextMenu.jsx";

function Example() {
  return (
    // specify a custom attribute name that ContextMenu will look for
    <ContextMenu dataKey="dataId">
      <div data-id="1" />
    </ContextMenu>
  );
}

Related article: Common context for different targets