React Migration in TextArea Component

This section explains how to migrate the TextArea 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` `<TextAreaComponent placeholder="Enter your comments" value='100' showClearButton=true></Component>`	Props: `clearButton` `<TextArea placeholder={"Enter your comments"} width={250} clearButton={true} />`	When migrating from EJ2 React to React, replace the `showClearButton` prop with the more semantically named `clearButton` prop to maintain the text clearing functionality in your textarea components.
Props: `cssClass` `<TextAreaComponent cssClass="custom-TextArea " ></TextAreaComponent >`	Props: `className` `<TextArea className="custom-TextArea "></TextArea >`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `e-small`,`e-bigger` `<TextAreaComponent cssClass="e-small"></TextAreaComponent >`	Props: `size` `<TextArea size={Size.Small}></TextArea >`	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: `cols` `<TextAreaComponent cols="35" placeholder="Enter your comments" ></TextAreaComponent >`	Props: `cols` `<TextArea cols={35} placeholder="Enter your comments" ></TextArea >`	The `cols` prop is supported in both EJ2 React and React.
Props: `rows` `<TextAreaComponent rows="3" placeholder="Enter your comments" ></TextAreaComponent >`	Props: `rows` `<TextArea rows={3} placeholder="Enter your comments" ></TextArea >`	The `rows` prop is supported in both EJ2 React and React.
Props: `resizeMode` `<TextAreaComponent rows="3" resizeMode="Both" placeholder="Enter your comments" ></TextAreaComponent >`	Props: `resizeMode` `<TextArea rows={3} resizeMode={ResizeMode.Both} placeholder="Enter your comments" ></TextArea >`	In EJ2 React, the `resizeMode` property accepts string values like `"Both"`, while in React, it uses typed enums like `ResizeMode.Both` for better type safety.
Props: `maxLength` `<TextAreaComponent rows="3" maxLength="20" placeholder="Enter your comments" ></TextAreaComponent >`	Props: `maxLength` `<TextArea maxLength={20} rows={3} placeholder="Enter your comments" ></TextArea >`	Both EJ2 React and React implementations fully support the `maxLength` property, allowing developers to effectively limit and control text input length within textarea components.
Props: `e-filled`,`e-outline` `<TextAreaComponent placeholder="Enter your comments" cssClass="e-filled"></TextAreaComponent >`	Props: `variant` `<TextArea placeholder="Enter your comments" variant={Variant.Filled}></TextArea >`	CSS class-based styling in EJ2 React (`cssClass="e-filled"`) has been replaced with a type-safe `variant` prop in React. Use the Variant enum with options like `Variant.Filled` and `Variant.Outlined` for consistent styling.
Props: `placeholder` `<TextAreaComponent placeholder={'Enter name'}></TextAreaComponent >`	Props: `placeholder` `<TextArea placeholder={'Enter name'}></TextArea >`	The `placeholder` prop is supported in both EJ2 React and React.
Props: `labelMode` `<TextAreaComponent labelMode={"Auto"}></TextAreaComponent >`	Props: `floatLabelType` `<TextArea floatLabelType={"Auto"}></TextArea >`	The `floatLabelType` property from EJ2 React has been renamed to `labelMode` in React.

Methods

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