React Migration in TextBox Component

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

Properties

EJ2 React	React	Description
Props: `showClearButton` `<TextBoxComponent placeholder="Enter name" value='100' showClearButton=true></Component>`	Props: `clearButton` `<TextBox placeholder="Enter name" width={250} clearButton={true} />`	The `showClearButton` property from EJ2 React has been replaced with the more intuitive `clearButton` property in React, providing the same functionality with a simplified naming convention.
Props: `cssClass` `<TextBoxComponent cssClass="custom-TextBox" ></TextBoxComponent>`	Props: `className` `<TextBox className="custom-TextBox"></TextBox>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `e-small`,`e-bigger` `<TextBoxComponent cssClass="e-small"></TextBoxComponent>`	Props: `size` `<TextBox size={Size.Small}></TextBox>`	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-bigger "` → `Size.Large`.
Props: `e-success`,`e-warning`, `e-danger` `<TextBoxComponent cssClass="e-success"></TextBoxComponent>`	Props: `Color` `<TextBox color={Color.success}></TextBox>`	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 `Color.success`, `Color.warning`, and `Color.danger`.
Props: `placeholder` `<TextBoxComponent placeholder={'Enter name'}></TextBoxComponent>`	Props: `placeholder` `<TextBox placeholder={'Enter name'}></TextBox>`	The `placeholder` prop is supported in both EJ2 React and React.
Props: `labelMode` `<TextBoxComponent labelMode={"Auto"}></TextBoxComponent>`	Props: `floatLabelType` `<TextBox floatLabelType={"Auto"}></TextBox>`	The `floatLabelType` property from EJ2 React has been renamed to `labelMode` in React.
Props: `prependTemplate` `<TextBoxComponent prependTemplate='<span>$</span>'></TextBoxComponent>`	Props: `prefix` `<TextBox prefix={<span>$</span>}></TextBox>`	The `prependTemplate` prop in EJ2 React is replaced by `prefix` in React. Specifies the icon or element to display at the beginning of the input.
Props: `appendTemplate` `<TextBoxComponent appendTemplate='<span>Icon</span>'></TextBoxComponent>`	Props: `suffix` `<TextBox suffix={<span>Icon</span>}></TextBox>`	The `appendTemplate` prop in EJ2 React is replaced by `suffix` in React. Specifies the icon or element to display at the end of the input.

Methods

EJ2 React	React	Description
Methods: `destroy()` `<TextBoxComponent id="TextBox" ref={(scope) => { this.textboxObj = scope } /> constructor(props: {}) { this.textboxObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <TextBox placeholder={'Enter name'}></TextBox>`	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
Event: `change` `<TextBoxComponent change={(e) => handleClose(e)}></TextBoxComponent>`	Event: `onChange` `<TextBox onChange={(e) => handleClose(e)}></TextBox>`	The `change` event in EJ2 React is replaced with the `change` event in React, following React's standard event naming convention.
Events: `focusIn` `<TextBoxComponent focusIn={() => console.log('focusIn')}></TextBoxComponent>`	Events: `onFocus` `<TextBox onFocus={(e) => handleClose(e)}></TextBox >`	The `focusIn` event in EJ2 becomes `onFocus` in React.
Events: `focusOut` `<TextBoxComponent focusOut={() => console.log('focusOut')}></TextBoxComponent>`	Events: `onBlur` `<TextBox onBlur={() => console.log('onBlur')}></TextBox>`	The `focusOut` event in EJ2 becomes `onBlur` in React.