React Migration in DropDownButton Component

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

Properties

EJ2 React	React	Description
Props: `Items` `<DropDownButtonComponent items={items} >Default</DropDownButtonComponent>`	Props: `Items` `<DropDownButton items={items} >Default</DropDownButton>`	The `Items` prop is supported in both EJ2 React and React, enabling you to define an array of dropdown menu items with properties like text, icon, and disabled state.
Props: `cssClass` `<DropDownButtonComponent items={menuItems} cssClass="my-DropDownButton" />`	Props: `className` `<DropDownButton items={menuItems} className="my-DropDownButton"/>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `iconCss` `<DropDownButtonComponent items={items} iconCss='e-sb-icons e-paste'>Paste</DropDownButtonComponent>`	Props: `icon` `<DropDownButton items={items} icon={profileIcon}></DropDownButton>`	The `iconCss` property for icons in EJ2 is replaced with the `icon` property in React.
Props: `iconPosition` `<DropDownButtonComponent items={items} iconPosition="Top" iconCss='e-sb-icons e-paste'>Paste</DropDownButtonComponent>`	Props: `iconPosition` `<DropDownButton items={items} icon={<PeopleIcon/>} iconPosition={Position.Right}>Profile</DropDownButton>`	The `iconPosition` prop is supported in both EJ2 React and React.
Props: `itemTemplate` `<DropDownButtonComponent items={items} itemTemplate = "<span> X</span>">Paste</DropDownButtonComponent>`	Props: `itemTemplate` `<DropDownButton items={items} itemTemplate = "<span> X</span>">Profile</DropDownButton>`	The `itemTemplate` prop is supported in both EJ2 React and React.
Props: `popupWidth` `<DropDownButtonComponent items={items} iconPosition="Top" iconCss='e-sb-icons e-paste' popupWidth="200" >Paste</DropDownButtonComponent>`	Props: `popupWidth` `<DropDownButton icon="icon" items={menuItems} iconPosition="Top" icon={profileIcon} popupWidth="200" />`	The `popupWidth` prop is supported in both EJ2 React and React.
Props: `disabled` `<DropDownButtonComponent items={items} disabled > Disabled </DropDownButtonComponent>`	Props: `disabled` `<DropDownButton items={items} disabled> Disabled </DropDownButton>`	The `disabled` prop, when set to true, prevents user interactions with the dropdown button by disabling click events and applying visual styling to indicate its inactive state in both EJ2 React and React implementations.
Props: `e-primary`, `e-success`, `e-info`, `e-warning`, `e-danger` `<DropDownButtonComponent items={items} cssClass='e-info'>Info</DropDownButtonComponent>`	Props: `Color` `<DropDownButton items={items} color={Color.Info}>Info</DropDownButton>`	CSS class-based coloring in EJ2 React has been replaced with a type-safe color prop in React. Use the Color enum to represent various colors like `Primary`, `Secondary`, `Warning`, `Success`, `Error`, and `Info`.
Props: `e-small`, `e-large` `<DropDownButtonComponent items={items} cssClass='e-small'> Small </DropDownButtonComponent>`	Props: `size` `<DropDownButton items={items} size={Size.Small} >Small</DropDownButton>`	CSS class-based sizing in EJ2 React has been replaced with a type-safe `size` prop in React. Use the `Size` enum for button sizing, with mappings: `"e-small"` → `Size.Small`, `"e-large"` → `Size.Large`.
Props: `e-flat`, `e-outline` `<DropDownButtonComponent cssClass='e-flat' items={items}>Flat</DropDownButtonComponent>`	Props: `variant` `<DropDownButton variant={Variant.Standard} items={items}>Standard Button</DropDownButton>`	CSS class-based styling (e.g., cssClass='e-flat') in EJ2 React has been replaced with the type-safe variant prop in React. Use the Variant enum with options like `Filled`, `Standard`, and `Outlined`.

Methods

EJ2 React	React	Description
Not applicable	Methods: `toggle()` `<DropDownButton items={items} ref={dropDownButton => this.dropDownButtonInstance = dropDownButton}> button className='sf-btn' onClick={this.dropDownButtonInstance.toggle()}> toggle </button> </DropDownButton>`	The `toggle` method is only supported in React.

Events

EJ2 React	React	Description
Event: `close` `<DropDownButtonComponent items={items} close={(e) => handleClose(e)}></DropDownButtonComponent>`	Event: `onClose` `<DropDownButton items={items} onClose={(e) => handleClose(e)}></DropDownButton>`	The `close` event in EJ2 React is replaced with the `onClose` event in React, following React's standard event naming convention.
Event: `open` `<DropDownButtonComponent items={items} open={(e) => handleClose(e)}></DropDownButtonComponent>`	Event: `onOpen` `<DropDownButton items={items} onOpen={(e) => handleClose(e)}></DropDownButton>`	The `open` event in EJ2 React is replaced with the `onOpen` event in React, following React's standard event naming convention.
Event: `select` `<DropDownButtonComponent items={items} select={(e) => handleClose(e)}></DropDownButtonComponent>`	Event: `onSelect` `<DropDownButton items={items} onSelect={(e) => handleClose(e)}></DropDownButton>`	The `select` event in EJ2 React is replaced with the `onSelect` event in React, following React's standard event naming convention.
Event: `toggle` `<DropDownButtonComponent items={items} toggle={(e) => handleClose(e)}></DropDownButtonComponent>`	Event: `toggle` Not applicable	The `toggle` event is only supported in EJ2 .
Events: `destroyed` `<DropDownButtonComponent items={items} destroyed={() => console.log('destroyed')}></DropDownButtonComponent>`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <DropDownButton items={items}></DropDownButton>`	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.