React Migration in Numeric TextBox Component

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

Properties

EJ2 ReactReactDescription

Props: showClearButton

<NumericTextBoxComponent id="numeric" value='100' showClearButton=true></NumericTextBoxComponent>

Props: clearButton

<NumericTextBox placeholder="Enter value" width={250} clearButton={true} />

The showClearButton property from EJ2 React has been renamed to clearButton in React for a more consistent API experience when implementing the clear functionality.

Props: cssClass

<NumericTextBoxComponent cssClass="custom-numericTextBox" ></NumericTextBoxComponent>

Props: className

<NumericTextBox className="custom-numericTextBox"></NumericTextBox>

The cssClass prop in EJ2 React is replaced with the standard React className prop in React.

Props: currency

<NumericTextBoxComponent currency="EUR"></NumericTextBoxComponent>

Props: currency

<NumericTextBox currency="EUR"></NumericTextBox>

The currency prop is fully supported in both EJ2 React and React implementations, allowing you to format numeric values according to specific currency formats.

Props: decimals

<NumericTextBoxComponent decimals= {2}></NumericTextBoxComponent>

Props: decimals

<NumericTextBox decimals={2}></NumericTextBox>

The decimals property is fully supported in both EJ2 React and React components, allowing you to specify the number of decimal places displayed in the NumericTextBox.

Props: format

<NumericTextBoxComponent format={'n2'}></NumericTextBoxComponent>

Props: format

<NumericTextBox format={'n2'}></NumericTextBox>

Both EJ2 React and React implementations fully support the format property, allowing you to customize the display format of numeric values within the Numeric TextBox component.

Props: maxValue

<NumericTextBoxComponent maxValue={100}></NumericTextBoxComponent>

Props: max

<NumericTextBox maxValue={100}></NumericTextBox>

The EJ2 maxValue property corresponds to the React max property, both serving to define the maximum allowed value in the Numeric TextBox.

Props: minValue

<NumericTextBoxComponent minValue={1}></NumericTextBoxComponent>

Props: min

<NumericTextBox min={100}></NumericTextBox>

When migrating from EJ2 to React, replace the minValue property with min, which serves the same purpose of setting the minimum allowable value for the Numeric TextBox component.

Props: strictMode

<NumericTextBoxComponent strictMode={true}></NumericTextBoxComponent>

Props: strictMode

<NumericTextBox strictMode={true}></NumericTextBox>

Both EJ2 React and React implementations fully support the strictMode prop, which enforces strict validation of numeric input according to defined formatting rules.

Props: placeholder

<NumericTextBoxComponent placeholder={'Enter value'}></NumericTextBoxComponent>

Props: placeholder

<NumericTextBox placeholder={'Enter value'}></NumericTextBox>

The placeholder prop is fully supported and functions identically in both EJ2 React and React implementations of the NumericTextBox component.

Props: validateDecimalOnType

<NumericTextBoxComponent validateDecimalOnType={true}></NumericTextBoxComponent>

Props: validateOnType

<NumericTextBox validateDecimalOnType={true}></NumericTextBox>

The validateDecimalOnType property in EJ2 becomes validateOnType in React, while maintaining the same validateDecimalOnType functionality.

Props: labelMode

<NumericTextBoxComponent labelMode={"Auto"}></NumericTextBoxComponent>

Props: floatLabelType

<NumericTextBox floatLabelType={"Auto"}></NumericTextBox>

The floatLabelType property from EJ2 React has been renamed to labelMode in React.

Props: step

<NumericTextBoxComponent step={2}></NumericTextBoxComponent>

Props: step

<NumericTextBox step={2}></NumericTextBox>

The step prop is supported in both EJ2 React and React.

Events

EJ2 ReactReactDescription

Event: change

<NumericTextBoxComponent change={(e) => handleClose(e)}></NumericTextBoxComponent>

Event: onChange

<NumericTextBox onChange={(e) => handleClose(e)}></NumericTextBox>

The change event in EJ2 React is replaced with the onChange event in React, following React's standard event naming convention.