pward123/menu

React Menu

rc-menu

---

react menu component. port from https://github.com/kissyteam/menu

Screenshot

Usage

import Menu, {SubMenu, MenuItem} = require('rc-menu');
ReactDOM.render(<Menu>
  <MenuItem>1</MenuItem>
  <SubMenu title="2">
  <MenuItem>2-1</MenuItem>
  </SubMenu>
</Menu>, container);

install

API

Menu props

name	type	default	description
className	String		additional css class of root dom node
mode	String	vertical	one of ["vertical","horizontal","inline"]
activeKey	Object		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
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
openSubMenuOnMouseEnter	bool	true	whether enable top items to open on mouse enter
closeSubMenuOnMouseLeave	bool	true	whether enable close submenu on mouse leave
openAnimation	{enter:function,leave:function}|String		animate when sub menu open or close. see rc-animate for object type.
openTransition	String		css transitionName when sub menu open or close

Menu.Item props

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
key	Object		corresponding to activeKey
onMouseEnter	Function({eventKey, domEvent})
onMouseLeave	Function({eventKey, domEvent})

Menu.SubMenu props

name	type	default	description
className	String		additional css class of root dom node
title	String/ReactElement		sub menu's content
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})

Menu.Divider props

none

Menu.ItemGroup props

name	type	default	description
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-menu is released under the MIT license.