@carbon/react/es/components/ContextMenu/useContextMenu.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { useState, useEffect } from 'react';

/**
 * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
 * @returns {ContextMenuProps} Props object to pass onto Menu component
 */
function useContextMenu(trigger = document) {
  const [open, setOpen] = useState(false);
  const [position, setPosition] = useState([0, 0]);
  function openContextMenu(e) {
    e.preventDefault();
    const {
      clientX: x,
      clientY: y
    } = e;
    setPosition([x, y]);
    setOpen(true);
  }
  function onClose() {
    setOpen(false);
  }
  useEffect(() => {
    const el = trigger instanceof Element || trigger instanceof Document || trigger instanceof Window ? trigger : trigger.current;
    if (el) {
      const eventListener = e => openContextMenu(e);
      el.addEventListener('contextmenu', eventListener);
      return () => {
        el.removeEventListener('contextmenu', eventListener);
      };
    }
  }, [trigger]);
  return {
    open,
    x: position[0],
    y: position[1],
    onClose
  };
}

export { useContextMenu as default };