tessl/npm-rc-menu

React menu UI component library providing comprehensive menu components for interactive navigation systems

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Menu Items

Name: tessl/npm-rc-menu
Author: tessl

Menu items are the individual interactive elements within a menu, providing click handling, icon support, disabled states, and mouse interaction events.

Capabilities

MenuItem Component

Individual menu item component with comprehensive interaction and styling options.

/**
 * Individual menu item component
 * @param props - Menu item configuration props
 * @returns React component
 */
declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;

interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
  // Content
  children?: React.ReactNode;
  
  // State
  disabled?: boolean;
  
  // Icons and Extras
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  extra?: React.ReactNode;
  
  // Event Handlers
  onMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
  onMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
}

Usage Examples:

import Menu, { MenuItem } from "rc-menu";

// Basic menu item
<MenuItem key="1">Home</MenuItem>

// Menu item with icon
<MenuItem key="2" itemIcon={<HomeIcon />}>
  Home
</MenuItem>

// Disabled menu item
<MenuItem key="3" disabled>
  Disabled Item
</MenuItem>

// Menu item with extra content
<MenuItem key="4" extra={<Badge count={5} />}>
  Messages
</MenuItem>

// Menu item with hover handlers
<MenuItem
  key="5"
  onMouseEnter={(info) => console.log('Mouse enter:', info.key)}
  onMouseLeave={(info) => console.log('Mouse leave:', info.key)}
>
  Hover Me
</MenuItem>

Dynamic Icon Rendering

Icons can be static React nodes or dynamic functions that receive state information.

Usage Examples:

// Static icon
<MenuItem key="1" itemIcon={<UserIcon />}>
  Profile
</MenuItem>

// Dynamic icon based on selection state
<MenuItem
  key="2"
  itemIcon={({ isSelected, disabled }) => (
    isSelected ? <FilledStarIcon /> : <OutlineStarIcon />
  )}
>
  Favorites
</MenuItem>

// Dynamic icon with disabled state
<MenuItem
  key="3"
  disabled={isProcessing}
  itemIcon={({ disabled }) => (
    disabled ? <LoadingIcon /> : <SaveIcon />
  )}
>
  Save
</MenuItem>

Menu Item States

Understanding different states and their visual representation.

Selection States:

// Selected item (when parent Menu has selectable=true)
<Menu selectable defaultSelectedKeys={['selected']}>
  <MenuItem key="selected">Selected Item</MenuItem>
  <MenuItem key="unselected">Unselected Item</MenuItem>
</Menu>

// Active item (keyboard navigation focus)
<Menu defaultActiveFirst>
  <MenuItem key="1">First Item (Active)</MenuItem>
  <MenuItem key="2">Second Item</MenuItem>
</Menu>

Disabled State:

<Menu>
  <MenuItem key="1">Normal Item</MenuItem>
  <MenuItem key="2" disabled>Disabled Item</MenuItem>
  <MenuItem key="3">Another Normal Item</MenuItem>
</Menu>

Extra Content and Advanced Layouts

Menu items can contain additional content beyond text and icons.

import { Badge, Tag, Switch } from 'antd';

<Menu>
  <MenuItem key="1" extra={<Badge count={3} />}>
    Messages
  </MenuItem>
  
  <MenuItem key="2" extra={<Tag color="red">New</Tag>}>
    Features
  </MenuItem>
  
  <MenuItem key="3" extra={<Switch size="small" />}>
    Notifications
  </MenuItem>
  
  <MenuItem key="4">
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span>Custom Layout</span>
      <span style={{ color: '#999', fontSize: '12px' }}>Ctrl+K</span>
    </div>
  </MenuItem>
</Menu>

Event Handling

Menu items support various mouse interaction events.

const handleItemHover = (info: { key: string; domEvent: React.MouseEvent }) => {
  console.log(`Hovering over item: ${info.key}`);
  // Access DOM event for additional information
  console.log('Mouse position:', info.domEvent.clientX, info.domEvent.clientY);
};

const handleItemLeave = (info: { key: string; domEvent: React.MouseEvent }) => {
  console.log(`Left item: ${info.key}`);
};

<Menu>
  <MenuItem
    key="1"
    onMouseEnter={handleItemHover}
    onMouseLeave={handleItemLeave}
  >
    Hover-sensitive Item
  </MenuItem>
</Menu>

Integration with Menu Container Events

Menu items work seamlessly with Menu container events for comprehensive interaction handling.

const handleMenuClick = (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
  console.log('Menu clicked:', info.key);
  console.log('Key path:', info.keyPath); // ['1'] for top-level, ['sub1', '1'] for nested
};

const handleMenuSelect = (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
  console.log('Menu selected:', info.key);
  console.log('All selected:', info.selectedKeys);
};

<Menu onClick={handleMenuClick} onSelect={handleMenuSelect} selectable>
  <MenuItem key="1">Item 1</MenuItem>
  <MenuItem key="2">Item 2</MenuItem>
  <SubMenu key="sub1" title="Sub Menu">
    <MenuItem key="3">Nested Item</MenuItem>
  </SubMenu>
</Menu>

Install with Tessl CLI