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 React	React	Description
Props: `animation` `<ContextMenuComponent id='contextmenu' items={menuItems} animationSettings={{ duration: 800, effect: 'FadeIn' }}/>`	Props: `animation` `<ContextMenu animation={{ effect: 'FadeIn', duration: 800 }} > <MenuItem text="Complete" /> <MenuItem text="Incomplete" /> </ContextMenu>`	The `animation` prop is supported in both EJ2 React and React.
Props: `cssClass` `<ContextMenuComponent cssClass='e-context' items={menuItems} ></ContextMenuComponent >`	Props: `className` `<ContextMenu className='sf-context'><MenuItem text="Complete" /> <MenuItem text="Incomplete" /></ContextMenu>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `enableScrolling` `<ContextMenuComponent items={menuItems} enableScrolling={true}></ContextMenuComponent >`	Props: `closeOnScroll` `<ContextMenu closeOnScroll={true}><MenuItem text="Complete" /> <MenuItem text="Incomplete" /></ContextMenu>`	The `enableScrolling` property in EJ2 React has been renamed to `closeOnScroll` in React.
Props: `showItemOnClick` `<ContextMenuComponent items={menuItems} showItemOnClick={true}></ContextMenuComponent >`	Props: `itemOnClick` `<ContextMenu itemOnClick={true}> <MenuItem text="Complete" /> <MenuItem text="Incomplete" /></ContextMenu>`	The `showItemOnClick` property in EJ2 React has been renamed to `itemOnClick` in React.
Props: `hoverDelay` `<ContextMenuComponent items={menuItems} hoverDelay={100}></ContextMenuComponent >`	Props: `hoverDelay` `<ContextMenu hoverDelay={100}> <MenuItem text="Complete" /> <MenuItem text="Incomplete" /> </ContextMenu>`	The `hoverDelay` prop is supported in both EJ2 React and React.
Props: `itemTemplate` `<ContextMenuComponent items={menuItems} itemTemplate={itemTemplate}></ContextMenuComponent >`	Props: `itemTemplate` `<ContextMenu itemTemplate={itemTemplate}> <MenuItem text="Complete" /> <MenuItem text="Incomplete" /> </ContextMenu>`	The `itemTemplate` prop is supported in both EJ2 React and React.
Props: `items` `<ContextMenuComponent items={menuItems}></ContextMenuComponent >`	Props: `items` `<ContextMenu items={menuItems}> <MenuItem text="Complete" /> <MenuItem text="Incomplete" /> </ContextMenu>`	The `items` prop is supported in both EJ2 React and React.
Props: `target` `<ContextMenuComponent target='#target' items={menuItems} ></ContextMenuComponent >`	Props: `targetRef` `<ContextMenu targetRef={listRef as React.RefObject<HTMLElement>}> <MenuItem text="Complete" /> <MenuItem text="Incomplete" /></ContextMenu>`	The `target` property in EJ2 React has been renamed to `targetRef` in React.

Methods

EJ2 React	React	Description
Methods: `destroy()` `<ContextMenuComponent id="context" shape= 'Circle' ref={(scope) => { this.contextObj = scope } /> constructor(props: {}) { this.contextObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <ContextMenu targetRef={listRef as React.RefObject<HTMLElement>}> <MenuItem text="Complete" /> <MenuItem text="Incomplete" /></ContextMenu>`	The `destroyed` callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React `useEffect` hook to execute logic on component unmount.

Events

EJ2 React	React	Description
Events: `onClose` `<ContextMenuComponent onClose={handler}> </ContextMenuComponent >`	Events: `onClose` `<ContextMenu onClose={handler}> </ContextMenu>`	The `onClose` event is supported in both EJ2 React and React.
Events: `onOpen` `<ContextMenuComponent onOpen={handler} > </ContextMenuComponent >`	Events: `onOpen` `<ContextMenu onOpen={handler}> </ContextMenu>`	The `onOpen` event is supported in both EJ2 React and React.
Events: `onSelect` `<ContextMenuComponent onSelect={handler} > </ContextMenuComponent >`	Events: `onSelect` `<ContextMenu onSelect={handler}> </ContextMenu>`	The `onSelect` event is supported in both EJ2 React and React.