React Migration for Menu Component

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

Overview

The Menu component serves as a navigation element with support for hierarchical menu items. Both EJ2 React and React versions provide similar functionality but with simplified APIs in the new React component.

Properties

EJ2 ReactReactDescription

Props: orientation

<MenuComponent items={menuItems} orientation='Vertical' />

Props: orientation

<Menu orientation={Orientation.Vertical}> <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> <MenuItem> <MenuItemLabel>Edit</MenuItemLabel> </MenuItem> </Menu>

The orientation prop is supported in both EJ2 React and React. Use the Orientation enum to specify horizontal or vertical layout.

Props: animationSettings

<MenuComponent items={menuItems} animationSettings={{ duration: 400, effect: 'FadeIn' }} />

Props: animation

<Menu animation={{ duration: 400, effect: 'FadeIn' }} > <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The animationSettings prop in EJ2 React is renamed to animation in React. The configuration structure remains similar.

Props: showItemOnClick

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

Props: itemOnClick

<Menu itemOnClick={true}> <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The showItemOnClick prop in EJ2 React is renamed to itemOnClick in React. When set to true, submenus open on click instead of hover.

Props: hoverDelay

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

Props: hoverDelay

<Menu hoverDelay={100}> <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The hoverDelay prop is supported in both EJ2 React and React. Specifies the delay time in milliseconds before opening the submenu when hovering.

Props: enableScrolling

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

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

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

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

The enableScrolling prop in EJ2 React is not available in React. React renders menu items through a loop-based recursive approach using map(). Apply CSS to the Menu 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: cssClass

<MenuComponent items={menuItems} cssClass='custom-menu' />

Props: className

<Menu className='custom-menu'> <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The cssClass prop in EJ2 React is replaced with the standard React className prop in React.

Props: enableRtl

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

Props: Use Provider component

<Provider dir='rtl'> <Menu> <MenuItem> <MenuItemLabel>ملف</MenuItemLabel> </MenuItem> </Menu> </Provider>

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

Props: items

const menuItems = [ { text: 'File', items: [ { text: 'New' }, { text: 'Open' } ]}, { text: 'Edit' } ]; <MenuComponent items={menuItems} />

Not available as a prop. Use composition-based children instead.

const menuItems = [ { id: '1', text: 'File' }, { id: '2', text: 'Edit' } ]; <Menu> {menuItems.map((item) => ( <MenuItem key={item.id}> <MenuItemLabel> {item.text} </MenuItemLabel> </MenuItem> ))} </Menu>

The items prop in EJ2 React is not available in React. Instead, use React's map() to dynamically render MenuItem components from data array.

Props: fields

const menuItems = [ { id: '1', text: 'File' }, { id: '2', text: 'Edit' } ]; <MenuComponent items={menuItems} fields={{ text: 'text', children: 'items' }} />

Not available in React. Use React's map() for rendering.

const menuItems = [ { id: '1', text: 'File' }, { id: '2', text: 'Edit' } ]; <Menu> {menuItems.map((item) => ( <MenuItem key={item.id}> <MenuItemLabel> {item.text} </MenuItemLabel> </MenuItem> ))} </Menu>

The fields prop in EJ2 React is not available in React. Instead, use React's map() to dynamically render MenuItem components from data.

Events

EJ2 ReactReactDescription

Events: onOpen

<MenuComponent items={menuItems} onOpen={(args) => { console.log('Menu opened', args); }} />

Events: onOpen

<Menu onOpen={(event) => { console.log('Menu opened', event); }} > <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The onOpen event is supported in both EJ2 React and React. Fires when the menu opens.

Events: onClose

<MenuComponent items={menuItems} onClose={(args) => { console.log('Menu closed', args); }} />

Events: onClose

<Menu onClose={(event) => { console.log('Menu closed', event); }} > <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The onClose event is supported in both EJ2 React and React. Fires when the menu closes.

Events: select

<MenuComponent items={menuItems} select={(args) => { console.log('Item selected', args.name); }} />

Events: onSelect

<Menu onSelect={(event) => { console.log('Item selected', event); }} > <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The select event in EJ2 React is renamed to onSelect in React. Fires when a menu item is selected.

Events: beforeOpen

<MenuComponent items={menuItems} beforeOpen={(args) => { console.log('Before menu opens'); }} />

Not available in React directly. Handle via onOpen event or component state.

<Menu onOpen={(event) => { // Perform pre-open logic here console.log('Menu opening'); }} > <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The beforeOpen event in EJ2 React is not directly available in React. Use the onOpen event instead for similar functionality.

Events: beforeClose

<MenuComponent items={menuItems} beforeClose={(args) => { console.log('Before menu closes'); }} />

Not available in React directly. Handle via onClose event or component state.

<Menu onClose={(event) => { // Perform pre-close logic here console.log('Menu closing'); }} > <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The beforeClose event in EJ2 React is not directly available in React. Use the onClose event instead for similar functionality.

Events: beforeItemRender

<MenuComponent items={menuItems} beforeItemRender={(args) => { console.log('Item rendering', args); }} />

Not available in React. Use React's render-time logic instead.

<Menu> {menuItems.map((item) => ( <MenuItem key={item.id}> <MenuItemLabel> {/* Custom render logic here */} {item.text} </MenuItemLabel> </MenuItem> ))} </Menu>

The beforeItemRender event in EJ2 React is not available in React. Instead, handle item rendering logic directly in the JSX.

Events: created

<MenuComponent items={menuItems} created={(args) => { console.log('Component created'); }} />

Not available in React. Use React Hooks instead.

useEffect(() => { console.log('Component mounted'); }, []); <Menu> <MenuItem> <MenuItemLabel>File</MenuItemLabel> </MenuItem> </Menu>

The created event in EJ2 React is not available in React. Use the React useEffect hook with an empty dependency array to run logic on component mount.