React Menu - Overview - DevExtreme React Example (2024)

TS JS

Backend API

import React, { useCallback, useState } from 'react';import Menu, { MenuTypes } from 'devextreme-react/menu';import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';import service, { ProductItemType } from './data.ts';const orientations = ['horizontal', 'vertical'];const orientationLabel = { 'aria-label': 'Orientation' };const showSubmenuModeLabel = { 'aria-label': 'Show Submenu Mode' };const products = service.getProducts();interface showSubmenuModesType { name: MenuTypes.SubmenuShowMode, delay: { show: number, hide: number }}const showSubmenuModes: showSubmenuModesType[] = [ { name: 'onHover', delay: { show: 0, hide: 500 }, }, { name: 'onClick', delay: { show: 0, hide: 300 }, },];const App = () => { const [showFirstSubmenuModes, setShowFirstSubmenuModes] = useState(showSubmenuModes[1]); const [orientation, setOrientation] = useState<MenuTypes.Orientation>('horizontal'); const [hideSubmenuOnMouseLeave, setHideSubmenuOnMouseLeave] = useState(false); const [currentProduct, setCurrentProduct] = useState(null); const itemClick = useCallback((e: MenuTypes.ItemClickEvent & { itemData: ProductItemType }) => { if (e.itemData.price) { setCurrentProduct(e.itemData); } }, [setCurrentProduct]); const showSubmenuModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { setShowFirstSubmenuModes(e.value); }, [setShowFirstSubmenuModes]); const orientationChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { setOrientation(e.value); }, [setOrientation]); const hideSubmenuOnMouseLeaveChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => { setHideSubmenuOnMouseLeave(e.value); }, [setHideSubmenuOnMouseLeave]); return ( <div className="form"> <div> <div className="label">Catalog:</div> <Menu dataSource={products} displayExpr="name" showFirstSubmenuMode={showFirstSubmenuModes} orientation={orientation} hideSubmenuOnMouseLeave={hideSubmenuOnMouseLeave} onItemClick={itemClick} /> {currentProduct && ( <div id="product-details"> <img src={currentProduct.icon} /> <div className="name">{currentProduct.name}</div> <div className="price">{`$${currentProduct.price}`}</div> </div> )} </div> <div className="options"> <div className="caption">Options</div> <div className="option"> <div>Show First Submenu Mode</div> <SelectBox items={showSubmenuModes} displayExpr="name" inputAttr={showSubmenuModeLabel} value={showFirstSubmenuModes} onValueChanged={showSubmenuModeChanged} /> </div> <div className="option"> <div>Orientation</div> <SelectBox items={orientations} inputAttr={orientationLabel} value={orientation} onValueChanged={orientationChanged} /> </div> <div className="option"> <CheckBox text="Hide Submenu on Mouse Leave" value={hideSubmenuOnMouseLeave} onValueChanged={hideSubmenuOnMouseLeaveChanged} /> </div> </div> </div> );};export default App;

import React, { useCallback, useState } from 'react';import Menu from 'devextreme-react/menu';import SelectBox from 'devextreme-react/select-box';import CheckBox from 'devextreme-react/check-box';import service from './data.js';const orientations = ['horizontal', 'vertical'];const orientationLabel = { 'aria-label': 'Orientation' };const showSubmenuModeLabel = { 'aria-label': 'Show Submenu Mode' };const products = service.getProducts();const showSubmenuModes = [ { name: 'onHover', delay: { show: 0, hide: 500 }, }, { name: 'onClick', delay: { show: 0, hide: 300 }, },];const App = () => { const [showFirstSubmenuModes, setShowFirstSubmenuModes] = useState(showSubmenuModes[1]); const [orientation, setOrientation] = useState('horizontal'); const [hideSubmenuOnMouseLeave, setHideSubmenuOnMouseLeave] = useState(false); const [currentProduct, setCurrentProduct] = useState(null); const itemClick = useCallback( (e) => { if (e.itemData.price) { setCurrentProduct(e.itemData); } }, [setCurrentProduct], ); const showSubmenuModeChanged = useCallback( (e) => { setShowFirstSubmenuModes(e.value); }, [setShowFirstSubmenuModes], ); const orientationChanged = useCallback( (e) => { setOrientation(e.value); }, [setOrientation], ); const hideSubmenuOnMouseLeaveChanged = useCallback( (e) => { setHideSubmenuOnMouseLeave(e.value); }, [setHideSubmenuOnMouseLeave], ); return ( <div className="form"> <div> <div className="label">Catalog:</div> <Menu dataSource={products} displayExpr="name" showFirstSubmenuMode={showFirstSubmenuModes} orientation={orientation} hideSubmenuOnMouseLeave={hideSubmenuOnMouseLeave} onItemClick={itemClick} /> {currentProduct && ( <div id="product-details"> <img src={currentProduct.icon} /> <div className="name">{currentProduct.name}</div> <div className="price">{`$${currentProduct.price}`}</div> </div> )} </div> <div className="options"> <div className="caption">Options</div> <div className="option"> <div>Show First Submenu Mode</div> <SelectBox items={showSubmenuModes} displayExpr="name" inputAttr={showSubmenuModeLabel} value={showFirstSubmenuModes} onValueChanged={showSubmenuModeChanged} /> </div> <div className="option"> <div>Orientation</div> <SelectBox items={orientations} inputAttr={orientationLabel} value={orientation} onValueChanged={orientationChanged} /> </div> <div className="option"> <CheckBox text="Hide Submenu on Mouse Leave" value={hideSubmenuOnMouseLeave} onValueChanged={hideSubmenuOnMouseLeaveChanged} /> </div> </div> </div> );};export default App;

import React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);

import React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html><html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body></html>

.form { margin-left: 3px;}.form > div:first-child { margin-right: 320px;}.label { font-size: 22px; padding-bottom: 24px;}#product-details { width: 400px; height: 400px; margin: 20px auto 0;}#product-details > img { height: 300px; width: 400px;}#product-details > .name { text-align: center; font-size: 20px;}#product-details > .price { text-align: center; font-size: 24px;}.dark #product-details > div { color: #f0f0f0;}.options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15);}.caption { font-size: 18px; font-weight: 500;}.option { margin-top: 10px;}.hidden { visibility: hidden;}