Skip to main content

dataKey

Description​

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

Usage​

dataKey?: string;

Default value​

"contextId"

Example​

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

import { useRef } from "react";

const resolver = (id: string) => id;
const menuRef = useRef<any>(null);

// the resolver prop enables the multi-area mode for the menu
<ActionMenu options={options} resolver={resolver} ref={menuRef} />

{/* a menu will appear for all items with the "data-context-id" attribute */}
{items.map(item => (
  <div
    key={item.id}
    className="item"
    onClick={(e) => menuRef.current?.show?.(e)}
    data-context-id={item.id}
  />
))}

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

<>
  <ActionMenu dataKey="dataId" />
  <div data-id="1" />
</>

Related article: Common context for different targets