React ContextMenu - Customize Item Appearance
For a minor customization of ContextMenu items, you can define specific fields in item data objects. For example, the following code generates three context menu items. Between the first and the second items lies a separator dividing one group of items from another. All the items are supplied with icons.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { ContextMenu } from 'devextreme-react/context-menu';
- const contextMenuItems = [
- { text: 'Zoom In', icon: 'plus' },
- { text: 'Share', icon: 'message', beginGroup: true },
- { text: 'Download', icon: 'download' }
- ];
- class App extends React.Component {
- render() {
- return (
- <ContextMenu
- items={contextMenuItems}
- target="#someElement"
- visible={true}
- />
- );
- }
- }
- export default App;
If you need a more flexible solution, define an itemTemplate.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { ContextMenu } from 'devextreme-react/context-menu';
- const contextMenuItems = [
- { text: "Zoom In", icon: "plus" },
- { text: "Share", icon: "message" },
- { text: "Download", icon: "download" }
- ];
- class App extends React.Component {
- render() {
- return (
- <ContextMenu
- items={contextMenuItems}
- target="#someElement"
- itemRender={this.renderItem}
- visible={true}
- />
- );
- }
- renderItem(data, index) {
- return (
- <div>
- <span className={`dx-icon-${data.icon}`}></span>
- <i style={{ marginLeft: 5 }}>{data.text}</i><span> [{index + 1}]</span>
- </div>
- );
- }
- }
- export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.