
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-menus2
Advanced tools
A carefully crafted menu for React
$ npm install react-menus --save
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.
See Changelog
See Roadmap
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){
}
<Menu items={items} onClick={onClick}/>
For rendering separators, just use a '-'
in the items array.
onChildClick
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.
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).
var items = [ {label: 'Save', onClick: function(){} }, { label: 'Export'}]
<Menu theme='' items={items} />
Or you can specify your own theme for the button. The value for the theme
property is just an object with different styles:
var theme = {
style: { background: 'blue'},
overStyle: { background: 'red', color: 'white'},
activeStyle: { background: 'magenta'},
expandedStyle: { background: 'magenta'},
disabledStyle: {background: 'gray'}
}
<Menu theme={theme} items={items} />
Or you can specify a theme as string: 'default'. The 'default'
theme is the only one built in.
<Menu theme='default' />
But you can add named themes:
var theme = require('react-menus').theme
theme.goldenTheme = { overStyle: {background: 'yellow'}}
<Menu theme='goldenTheme' />
For styling menu separators, set the desired style properties on Menu.Separator.style
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
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).
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.
<Menu maxHeight={200} items={items}/>
Of course you can turn off scrolling with enableScroll: false
Showing and hiding submenus is implemented with a smart algorithm, as described here. Also submenu positioning is made taking into account the available space. More documentation on this soon.
MIT
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.