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.
| 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. |
| 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. |
| 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. |