React Migration in ContextMenu Component

This section explains how to migrate the ContextMenu component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 ReactReactDescription

Props: animationSettings

<ContextMenuComponent id='contextmenu' items={menuItems} animationSettings={{ duration: 800, effect: 'FadeIn' }}/>

Props: animation

<ContextMenu animation={{ effect: 'FadeIn', duration: 800, easing: 'ease' }} > <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> <MenuItem> <MenuItemLabel>Incomplete</MenuItemLabel> </MenuItem> </ContextMenu>

The animationSettings property in EJ2 React is renamed to animation in React. It now accepts a MenuAnimationProps object with duration, easing, and effect properties.

Props: items and itemTemplate

const menuItems = [ { text: 'Complete' }, { text: 'Incomplete' } ]; <ContextMenuComponent items={menuItems} itemTemplate={itemTemplate} />

Props: JSX children composition

<ContextMenu> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> <MenuItem> <MenuItemLabel>Incomplete</MenuItemLabel> </MenuItem> </ContextMenu>

In EJ2 React, items were provided as an array with itemTemplate for customization. In React, use JSX composition with MenuItem components to define menu items directly.

Props: cssClass

<ContextMenuComponent cssClass='e-custom-class' items={menuItems} />

Styling: Apply className to ContextMenu or MenuItem components

// Apply className directly to ContextMenu <ContextMenu className='custom-menu'> <MenuItem className='custom-menu-item'> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> <MenuItem className='custom-menu-item'> <MenuItemLabel>Incomplete</MenuItemLabel> </MenuItem> </ContextMenu>

The cssClass property is not available in React. Apply styling using standard React className prop on the ContextMenu component and its child components.

Props: enableScrolling

<ContextMenuComponent items={menuItems} enableScrolling={true}></ContextMenuComponent>

Not available as a prop. Use className with CSS for scrollable behavior.

<ContextMenu className='scrollable-menu'> {menuItems.map((item) => ( <MenuItem key={item.id}> <MenuItemLabel>{item.text}</MenuItemLabel> </MenuItem> ))} </ContextMenu>

CSS: { max-height: '200px', overflowY: 'auto' }

The enableScrolling property in EJ2 React is not available in React. React renders menu items through a loop-based recursive approach using map(). Apply CSS to the ContextMenu with max-height and overflow-y: auto for scrollable behavior. Default max-height is 500px and can be customized as needed (example shows 200px).

Props: showItemOnClick

<ContextMenuComponent items={menuItems} showItemOnClick={true}></ContextMenuComponent >

Props: itemOnClick

<ContextMenu itemOnClick={true}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu>

The showItemOnClick property in EJ2 React has been renamed to itemOnClick in React. Controls whether submenus open on click instead of hover.

Props: hoverDelay

<ContextMenuComponent items={menuItems} hoverDelay={100}></ContextMenuComponent >

Props: hoverDelay

<ContextMenu hoverDelay={100}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu>

The hoverDelay prop is supported in both EJ2 React and React. Specifies the delay in milliseconds before opening a submenu on hover.

Props: target

<ContextMenuComponent target='#target' items={menuItems} ></ContextMenuComponent >

Props: targetRef

const targetRef = useRef<HTMLDivElement>(null); <div ref={targetRef}> <button>Right Click Me</button> </div> <ContextMenu targetRef={targetRef as React.RefObject<HTMLElement>}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu>

The target property in EJ2 React has been renamed to targetRef in React. Now accepts a React ref object instead of a CSS selector string.

Props: enableRtl

<ContextMenuComponent items={menuItems} enableRtl={true} />

Props: Use Provider component

<Provider dir='rtl'> <ContextMenu> <MenuItem> <MenuItemLabel>Option</MenuItemLabel> </MenuItem> </ContextMenu> </Provider>

The enableRtl prop in EJ2 React is replaced by a Provider component in React. Wrap the ContextMenu component with the Provider component and set the dir prop to 'rtl' to enable RTL support.

Methods

In the new React component architecture, imperative methods like destroy() are no longer available. Instead, React's functional component patterns and hooks are used for lifecycle management:

EJ2 React (Class Component)React (Functional Component)Description

Methods: destroy()

class MyComponent extends React.Component { contextObj: any; componentWillUnmount() { this.contextObj?.destroy(); } } 		const MyComponent = () => { useEffect(() => { return () => { // Cleanup logic on unmount console.log('ContextMenu destroyed'); }; }, []); return ( <ContextMenu targetRef={listRef}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu> ); }

The imperative destroy() method is not available in React functional components. Use the cleanup function returned by the useEffect hook to execute logic on component unmount instead.

Events

EJ2 ReactReactDescription

Events: onClose

const handler = (args: any) => { console.log('Menu closed'); }; <ContextMenuComponent onClose={handler}> </ContextMenuComponent>

Events: onClose

const handleClose = (event: Event) => { console.log('Menu closed', event); }; <ContextMenu onClose={handleClose}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu>

The onClose event is supported in both EJ2 React and React. Triggers before the menu closes. In React, receives a native Event object.

Events: onOpen

const handler = (args: any) => { console.log('Menu opened'); }; <ContextMenuComponent onOpen={handler} > </ContextMenuComponent>

Events: onOpen

const handleOpen = (event: Event) => { console.log('Menu opened', event); }; <ContextMenu onOpen={handleOpen}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu>

The onOpen event is supported in both EJ2 React and React. Triggers before the menu opens. In React, receives a native Event object.

Events: onSelect

const handler = (args: any) => { console.log('Item selected:', args.item.text); }; <ContextMenuComponent onSelect={handler} > </ContextMenuComponent>

Events: onSelect

const handleSelect = (event: MenuSelectEvent) => { console.log('Item selected:', event.item); }; <ContextMenu onSelect={handleSelect}> <MenuItem> <MenuItemLabel>Complete</MenuItemLabel> </MenuItem> </ContextMenu>

The onSelect event is supported in both EJ2 React and React. Triggers when a menu item is selected. In React, the event parameter is of type MenuSelectEvent containing the event (React.SyntheticEvent) and item (MenuItemProps) data.