@rc-component/menu
v1.2.0TypeScript
menu ui component for react
0/weekUpdated 2 months agoMITUnpacked: 225.8 KB
Published by zombiej
npm install @rc-component/menu@rc-component/menu
---
React Menu Component. port from https://github.com/kissyteam/menu
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
[npm-image]: https://img.shields.io/npm/v/@rc-component/menu.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@rc-component/menu
[github-actions-image]: https://github.com/react-component/menu/actions/workflows/main.yml/badge.svg
[github-actions-url]: https://github.com/react-component/menu/actions/workflows/main.yml
[circleci-image]: https://img.shields.io/circleci/react-component/menu/master?style=flat-square
[circleci-url]: https://circleci.com/gh/react-component/menu
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/footer/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/footer/branch/master
[coveralls-image]: https://img.shields.io/coveralls/react-component/menu.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/menu?branch=master
[david-url]: https://david-dm.org/react-component/menu
[david-image]: https://david-dm.org/react-component/menu/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/menu?type=dev
[david-dev-image]: https://david-dm.org/react-component/menu/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/menu.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/menu
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/menu
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/menu
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
Install
Usage
``js
import Menu, { SubMenu, MenuItem } from '@rc-component/menu';
ReactDOM.render(
container,
);
`
Compatibility
| 
IE / Edge | 
Firefox | 
Chrome | 
Safari | 
Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
API
$3
name
type
default
description
ref
React.HTMLLIElement
get dom node
className
String
additional css class of root dom node
mode
String
vertical
one of ["horizontal","inline","vertical-left","vertical-right"]
activeKey
String
initial and current active menu item's key.
defaultActiveFirst
Boolean
false
whether active first menu item when show if activeKey is not set or invalid
multiple
Boolean
false
whether allow multiple select
selectable
Boolean
true
allow selecting menu items
selectedKeys
String[]
[]
selected keys of items
defaultSelectedKeys
String[]
[]
initial selected keys of items
openKeys
String[]
[]
open keys of SubMenuItem
defaultOpenKeys
String[]
[]
initial open keys of SubMenuItem
onSelect
function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]})
called when select a menu item
onClick
function({key:String, item:ReactComponent, domEvent:Event, keyPath: String[]})
called when click a menu item
onOpenChange
(openKeys:String[]) => void
called when open/close sub menu
onDeselect
function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]})
called when deselect a menu item. only called when allow multiple
triggerSubMenuAction
Enum { hover, click }
hover
which action can trigger submenu open/close
openAnimation
{enter:function,leave:function}|String
animate when sub menu open or close. see @rc-component/motion for object type.
openTransition
String
css transitionName when sub menu open or close
subMenuOpenDelay
Number
0
delay time to show popup sub menu. unit: s
subMenuCloseDelay
Number
0.1
delay time to hide popup sub menu. unit: s
forceSubMenuRender
Boolean
false
whether to render submenu even if it is not visible
getPopupContainer
Function(menuDOMNode): HTMLElement
() => document.body
Where to render the DOM node of popup menu when the mode is horizontal or vertical
builtinPlacements
Object of alignConfigs for dom-align
see placements.ts
Describes how the popup menus should be positioned
itemIcon
ReactNode | (props: MenuItemProps) => ReactNode
Specify the menu item icon.
expandIcon
ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode
Specify the menu item icon.
direction
String
Layout direction of menu component, it supports RTL direction too.
inlineIndent
Number
24
Padding level multiplier. Right or left padding depends on param "direction".
$3
name
type
default
description
className
String
additional css class of root dom node
disabled
Boolean
false
no effect for click or keydown for this item
extra
React.ReactNode
Specify menu item extra node.
key
Object
corresponding to activeKey
onMouseEnter
Function({eventKey, domEvent})
onMouseLeave
Function({eventKey, domEvent})
itemIcon
ReactNode | (props: MenuItemProps) => ReactNode
Specify the menu item icon.
$3
name
type
default
description
ref
React.HTMLLIElement
get dom node
popupClassName
String
additional css class of root dom node
popupStyle
CSSProperties
additional css style of root dom node
title
String/ReactElement
sub menu's content
overflowedIndicator
String/ReactElement
···
overflow indicator when menu overlows in horizontal mode
key
Object
corresponding to activeKey
disabled
Boolean
false
no effect for click or keydown for this item
onMouseEnter
Function({eventKey, domEvent})
onMouseLeave
Function({eventKey, domEvent})
onTitleMouseEnter
Function({eventKey, domEvent})
onTitleMouseLeave
Function({eventKey, domEvent})
onTitleClick
Function({eventKey, domEvent})
popupOffset
Array
The offset of the popup submenu, in an x, y coordinate array. e.g.: [0,15]
expandIcon
ReactNode | (props: SubMenuProps) => ReactNode
Specify the menu item icon.
itemIcon
ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode
Specify the menu item icon.
$3
none
$3
name
type
default
description
ref
React.HTMLLIElement
get dom node
title
String|React.Element
title of item group
children
React.Element[]
MenuItems belonged to this group
Development
npm install
npm start
Example
http://localhost:8001/examples/index.md
online example: http://react-component.github.io/menu/examples/
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
@rc-component/menu is released under the MIT license.