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

RC Menu

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

RC Menu is a comprehensive React menu component library that provides a full set of UI components for creating interactive menus in React applications. It offers Menu, SubMenu, MenuItem, Divider, and ItemGroup components with extensive customization options including multiple selection modes, keyboard navigation support, animation effects, and flexible styling.

Package Information

Package Name: rc-menu
Package Type: npm
Language: TypeScript
Installation: npm install rc-menu

Core Imports

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

Alternative named imports:

import Menu, { SubMenu, Item, ItemGroup, Divider } from "rc-menu";

For CommonJS:

const Menu = require("rc-menu");
const { SubMenu, MenuItem, MenuItemGroup, Divider } = Menu;

For type definitions:

import type { MenuProps, MenuItemProps, SubMenuProps, MenuItemGroupProps, MenuRef } from "rc-menu";

Basic Usage

Modern items API (Recommended):

import Menu from "rc-menu";

function App() {
  const handleClick = (info) => {
    console.log('Clicked:', info.key);
  };

  const handleSelect = (info) => {
    console.log('Selected:', info.selectedKeys);
  };

  const items = [
    {
      key: '1',
      label: 'Navigation One',
    },
    {
      key: '2',
      label: 'Navigation Two',
    },
    {
      key: 'sub1',
      label: 'Navigation Three - SubMenu',
      children: [
        { key: '3', label: 'Option 1' },
        { key: '4', label: 'Option 2' },
      ],
    },
    { type: 'divider' },
    {
      key: '5',
      label: 'Navigation Four',
    },
  ];

  return (
    <Menu
      mode="vertical"
      items={items}
      defaultSelectedKeys={['1']}
      onClick={handleClick}
      onSelect={handleSelect}
    />
  );
}

Legacy children API (Deprecated):

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

function App() {
  const handleClick = (info) => {
    console.log('Clicked:', info.key);
  };

  const handleSelect = (info) => {
    console.log('Selected:', info.selectedKeys);
  };

  return (
    <Menu
      mode="vertical"
      defaultSelectedKeys={['1']}
      onClick={handleClick}
      onSelect={handleSelect}
    >
      <MenuItem key="1">Navigation One</MenuItem>
      <MenuItem key="2">Navigation Two</MenuItem>
      <SubMenu key="sub1" title="Navigation Three - SubMenu">
        <MenuItem key="3">Option 1</MenuItem>
        <MenuItem key="4">Option 2</MenuItem>
      </SubMenu>
      <Divider />
      <MenuItem key="5">Navigation Four</MenuItem>
    </Menu>
  );
}

Architecture

RC Menu is built around several key components and systems:

Menu Container: Main component managing state, keyboard navigation, and child component coordination
Menu Items: Individual interactive elements (MenuItem) with event handling and styling support
SubMenu System: Nested menu support with popup/inline modes and configurable triggers
Selection Management: Single/multiple selection with controlled and uncontrolled modes
Animation System: Configurable animations for expand/collapse and popup behaviors
Keyboard Navigation: Full accessibility support with arrow key navigation and Enter/Space activation
Event System: Comprehensive click, select, hover, and open/close event handling

Capabilities

Menu Container

Core menu container component with comprehensive configuration options for layout, selection, animation, and event handling.

interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
  // Basic Configuration
  prefixCls?: string;
  rootClassName?: string;
  items?: any[]; // Array of item objects with key, label, children properties
  /** @deprecated Please use `items` instead */
  children?: React.ReactNode;
  disabled?: boolean;
  direction?: 'ltr' | 'rtl';
  
  // Mode
  mode?: 'horizontal' | 'vertical' | 'inline';
  inlineCollapsed?: boolean;
  disabledOverflow?: boolean;
  
  // Active State
  activeKey?: string;
  defaultActiveFirst?: boolean;
  
  // Selection
  selectable?: boolean;
  multiple?: boolean;
  defaultSelectedKeys?: string[];
  selectedKeys?: string[];
  
  // Open/Close Control
  defaultOpenKeys?: string[];
  openKeys?: string[];
  
  // Events
  onClick?: (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onSelect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onDeselect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onOpenChange?: (openKeys: string[]) => void;
  
  // Level & Layout
  inlineIndent?: number;
  
  // Motion
  motion?: any; // Animation configuration object
  defaultMotions?: any; // Default animation configurations for different modes
  
  // Popup
  subMenuOpenDelay?: number;
  subMenuCloseDelay?: number;
  forceSubMenuRender?: boolean;
  triggerSubMenuAction?: 'click' | 'hover';
  builtinPlacements?: Record<string, any>;
  
  // Icon
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  overflowedIndicator?: React.ReactNode;
  overflowedIndicatorPopupClassName?: string;
  
  // Function
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
}

interface MenuRef {
  focus: (options?: FocusOptions) => void;
  list: HTMLUListElement;
}

Menu Container

Menu Items

Individual menu item components with support for icons, disabled states, and event handling.

interface MenuItemProps {
  children?: React.ReactNode;
  disabled?: boolean;
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  extra?: React.ReactNode;
  onMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
  onMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
}

Menu Items

SubMenu System

Nested menu support with popup and inline modes, configurable triggers, and animation options.

interface SubMenuProps {
  title?: React.ReactNode;
  children?: React.ReactNode;
  disabled?: boolean;
  popupClassName?: string;
  popupStyle?: React.CSSProperties;
  popupOffset?: number[];
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  overflowedIndicator?: React.ReactNode;
  onTitleClick?: (info: { key: string; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onTitleMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
  onTitleMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
}

SubMenu System

Layout Components

Utility components for organizing menu structure including groups and dividers.

interface MenuItemGroupProps {
  title?: React.ReactNode;
  children?: React.ReactNode;
}

interface DividerProps {
  className?: string;
  style?: React.CSSProperties;
}

Layout Components

Install with Tessl CLI