ContextMenu

import React, { useState } from 'react';

interface ContextMenuProps {
  children: React.ReactNode;
}

const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
  const [showMenu, setShowMenu] = useState(false);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleRightClick = (e: React.MouseEvent) => {
    e.preventDefault();
    setShowMenu(true);
    setX(e.clientX);
    setY(e.clientY);
  };

  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    setShowMenu(false);
  };

  return (
    <div onContextMenu={handleContextMenu} style={{ position: 'relative' }}>
      {children}
      {showMenu && (
        <div style={{
          position: 'absolute',
          top: y,
          left: x,
          background: '#0A0A0A',
          borderRadius: '10px',
          padding: '10px',
          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)',
        }}>
          <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>
              Submenu
              <ul>
                <li>Submenu Item 1</li>
                <li>Submenu Item 2</li>
              </ul>
            </li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default ContextMenu;

Component info

Dependencies

About

A premium React context menu component with dark glass style, featuring right-click functionality and support for submenus. Built with TypeScript, this component is designed to provide a sleek and modern user experience. With its dark #0A0A0A background, it blends seamlessly into any application, making it an ideal choice for developers seeking a sophisticated and intuitive context menu solution. The ContextMenu component is fully customizable, allowing developers to tailor its appearance and behavior to meet their specific needs. Whether you're building a complex web application or a simple website, this component is sure to enhance the user experience with its sleek design and effortless functionality.