React Migration in SplitButton Component

This section explains how to migrate the SplitButton 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` `<SplitButtonComponent items={items} >Default</SplitButtonComponent>`	Props: `Items` `<SplitButton items={items} >Default</SplitButton>`	The `Items` prop is supported in both EJ2 React and React.
Props: `cssClass` `<SplitButtonComponent items={menuItems} cssClass="my-splitbutton"/>`	Props: `className` `<SplitButton items={menuItems} className="my-splitbutton" />`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `iconCss` `<SplitButtonComponent items={items} iconCss='e-sb-icons e-paste'>Paste</SplitButtonComponent>`	Props: `icon` `<SplitButton items={items} icon={profileIcon}></SplitButton>`	EJ2 SplitButtonComponent to React SplitButton with property changes. The `iconCss` property for icons in EJ2 is replaced with the `icon` property in React.
Props: `iconPosition` `<SplitButtonComponent items={items} iconPosition="Top" iconCss='e-sb-icons e-paste'>Paste</SplitButtonComponent>`	Props: `iconPosition` `<SplitButton icon="icon" items={menuItems} iconPosition="Top" icon={profileIcon} />`	The `iconPosition` prop is supported in both EJ2 React and React.
Props: `popupWidth` `<SplitButtonComponent items={items} iconPosition="Top" iconCss='e-sb-icons e-paste' popupWidth="200" >Paste</SplitButtonComponent>`	Props: `popupWidth` `<SplitButton icon="icon" items={menuItems} iconPosition="Top" icon={profileIcon} popupWidth="200" />`	The `popupWidth` prop is supported in both EJ2 React and React.
Props: `itemTemplate` `<SplitButtonComponent items={items} itemTemplate = "<span> X</span>" >Default</SplitButtonComponent>`	Props: `itemTemplate` `<SplitButton items={items} itemTemplate = "<span> X</span>" >Default</SplitButton>`	The `itemTemplate` prop is supported in both EJ2 React and React.
Props: `e-small`, `e-large` `<SplitButtonComponent items={items} cssClass='e-small'> Small </SplitButtonComponent>`	Props: `size` `<SplitButton items={items} size={Size.Small} >Small</SplitButton>`	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` `<SplitButtonComponent cssClass='e-flat' items={items}>Flat</SplitButtonComponent>`	Props: `variant` `<SplitButton variant={Variant.Standard} items={items}>Standard Button</SplitButton>`	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`.
Props: `disabled` `<SplitButtonComponent items={items} disabled={true}> Disabled </SplitButtonComponent>`	Props: `disabled` `<SplitButton items={items} disabled={true} > Disabled </SplitButton>`	The `disabled` prop is supported in both EJ2 React and React.

Methods

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

Events

EJ2 React	React	Description
Event: `close` `<SplitButtonComponent items={items} close={(e) => handleClose(e)}></SplitButtonComponent>`	Event: `onClose` `<SplitButton items={items} onClose={(e) => handleClose(e)}></SplitButton>`	The `close` event in EJ2 React is replaced with the `onClose` event in React, following React's standard event naming convention.
Event: `open` `<SplitButtonComponent items={items} open={(e) => handleClose(e)}></SplitButtonComponent>`	Event: `onOpen` `<SplitButton items={items} onOpen={(e) => handleClose(e)}></SplitButton>`	The `open` event in EJ2 React is replaced with the `onOpen` event in React, following React's standard event naming convention.
Event: `select` `<SplitButtonComponent items={items} select={(e) => handleClose(e)}></SplitButtonComponent>`	Event: `onSelect` `<SplitButton items={items} onSelect={(e) => handleClose(e)}></SplitButton>`	The `select` event in EJ2 React is replaced with the `onSelect` event in React, following React's standard event naming convention.
Event: `toggle` `<SplitButtonComponent items={items} toggle={(e) => handleClose(e)}></SplitButtonComponent>`	Event: `toggle` Not applicable	The `toggle` event is only supported in EJ2 React.
Events: `destroyed` `<SplitButtonComponent items={items} created={() => console.log('destroyed')}></SplitButtonComponent>`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <SplitButton items={items} ></SplitButton>`	The `destroyed` callback prop in EJ2 React is not available in React components. Instead, use the cleanup function returned by React’s `useEffect` hook to execute login on component unmount.