# react-menus2 > A carefully crafted menu widget for React Latest version **3.0.0** (published 2017-12-07) · MIT license · 0 weekly downloads ## Install ```sh npm install react-menus2 pnpm add react-menus2 yarn add react-menus2 bun add react-menus2 ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.0.0 | | Published | 2017-12-07 | | First published | 2017-12-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | ZippyUI ~2016 \| Steve Lacy ~2017 | | Maintainers | stevelacy | | Keywords | menu, react-component, menu-ui, menus, menu, widget, component, react | ## Links - npm: https://www.npmjs.com/package/react-menus2 - Repository: https://github.com/stevelacy/react-menus2 - Issues: https://github.com/stevelacy/react-menus2/issues - npm.io page: https://npm.io/package/react-menus2 ## Dependencies (12) - [react](https://npm.io/package/react.md) ^16.2.0 - [has-touch](https://npm.io/package/has-touch.md) ^1.0.1 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [arrow-style](https://npm.io/package/arrow-style.md) ^1.1.1 - [region-align](https://npm.io/package/region-align.md) ^2.1.3 - [object-assign](https://npm.io/package/object-assign.md) ^4.0.1 - [select-parent](https://npm.io/package/select-parent.md) ^1.0.1 - [buffer-function](https://npm.io/package/buffer-function.md) ^1.0.0 - [point-in-triangle](https://npm.io/package/point-in-triangle.md) ^1.0.1 - [react-event-names](https://npm.io/package/react-event-names.md) ^1.0.0 - [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.2 - [react-style-normalizer](https://npm.io/package/react-style-normalizer.md) ^1.2.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.0.0 (latest) — 2017-12-07 ## README react-menus =========== > A carefully crafted menu for React ## Install ```sh $ npm install react-menus --save ``` ## Description The `react-menus` component is a context-menu like widget for React. It features **smart positioning**, overflow **scrolling** on too many menu items and **smart submenu positioning**. ## Changelog See [Changelog](./CHANGELOG.md) ## Roadmap See [Roadmap](./ROADMAP.md) ## Usage ```jsx var items = [ { label: 'hello', onClick: function(itemProps, index, event) { console.log('well, hello') } }, '-', //show separator { label: 'hi' }, { label: 'export', disabled: true } ] function onClick(event, props, index){ } ``` For rendering separators, just use a `'-'` in the items array. ## Properties * items: Object[] * onClick: Function(event, props, index) - Called on a click on a direct menu item. For clicks on menu items at any level of nesting, use `onChildClick` * onChildClick: Function(event, props) - Called when a menu item at any level of nesting was clicked * columns: String[] - defaults to ['label'] For every item in the items property, a row will be rendered, with all the columns specified in `props.columns`. Every column displays the value in item[<column_name>]. Every item can optionally have an **onClick** property, which is called when the item is clicked. (**onClick: Function(event, itemProps, index)**). Making an item disabled is done by specifying **disabled: true** on the item object. * expander: String/ReactElement - an expander tool to use when a menu item has other subitems. Defaults to the unicode arrow character **›**. ### Styling & advanced usage By default, the `react-menus` component comes with built-in structural styles as well as with styles for a default nice theme. The specified theme is applied to menu items. If you don't want to render menu items with the default theme, just specify `theme=''` (or any falsy value). ```jsx var items = [ {label: 'Save', onClick: function(){} }, { label: 'Export'}] ``` Or you can specify your own theme for the button. The value for the `theme` property is just an object with different styles: ```jsx var theme = { style: { background: 'blue'}, overStyle: { background: 'red', color: 'white'}, activeStyle: { background: 'magenta'}, expandedStyle: { background: 'magenta'}, disabledStyle: {background: 'gray'} } ``` Or you can specify a theme as string: 'default'. The `'default'` theme is the only one built in. ```jsx ``` But you can add named themes: ```jsx var theme = require('react-menus').theme theme.goldenTheme = { overStyle: {background: 'yellow'}} ``` For styling menu separators, set the desired style properties on `Menu.Separator.style` ```jsx var Menu = require('react-menus') var Separator = Menu.Separator Separator.style = { background: 'red' //the color of the separator } Separator.size = 10 //will be 10 px in height ``` ### Style props Styling menu items overrides theme styles. * itemStyle - style to be applied to menu items. Overrides `theme.style` * itemOverStyle - style to be applied to menu items on mouse over. Overrides `theme.overStyle` * itemActiveStyle - style to be applied to menu items on mouse down on the item. Overrides `theme.activeStyle` * itemExpandedStyle - style to be applied to menu items when the item is expanded. Overrides `theme.expandedStyle` * itemDisabledStyle - style to be applied to disabled menu items. Overrides `theme.defaultStyle` * cellStyle - style to be applied to menu item cells (expect the expander cell). ### Scrolling Menu scrolling is enabled by default (`enableScroll: true`). When you have too many items, and the menu is bigger than it's parent container, the menu shows a scrolling user interface. Or you can specify a `maxHeight` property on the menu, and if that is exceeded, the menu is scrollable. ```jsx ``` Of course you can turn off scrolling with `enableScroll: false` ### Smart submenus Showing and hiding submenus is implemented with a smart algorithm, as described [here](http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown). Also submenu positioning is made taking into account the available space. More documentation on this soon. ## License ```MIT``` --- _Source: https://npm.io/package/react-menus2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._