Skip to main content

resolver

Description​

Optional. Enables the multi-area mode and defines whether an element needs a menu

Usage​

resolver?: (item: any, event: MouseEvent) => any;

Parameters​

The resolver function receives two arguments:

  • item - the value of the data-context-id attribute (or any custom identifier associated with the clicked element).
  • event - the native MouseEvent that triggered the menu.

The function should return:

  • false or null -> no menu will be shown.
  • true -> the menu will be shown with the item’s raw identifier.
  • any object -> the returned value will be passed as the context in the menu’s onClick event (available on the event detail).

Example​

// the id inside the resolver is the value of the "data-context-id" attribute
function getItem(id) {
  return items.find(a => a.id == id);
}

function App() {
  return (
    <ContextMenu options={options} resolver={getItem}>
      {items.map(item => (
        <div key={item.id} data-context-id={item.id} className="item">
          {item.type} {item.id}
        </div>
      ))}
    </ContextMenu>
  );
}

Details​

Check the examples of valid resolvers below:

const allowAll = (item, ev) => true;
const allowElementsWithCorrectAttribute = (item, ev) => item;
const allowAndReturnTaskObject = (item, ev) => tasks[item];

Related article: Using ContextMenu for multiple targets

Related sample: ContextData