The following section explains the required steps to build the NumericTextBox component with its basic usage in step by step procedure.
The following list of dependencies are required to use the NumericTextBox component in your application.
|-- @syncfusion/ej2-react-inputs
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-react-baseYou can use Create-react-app to setup the applications.
To install create-react-app run the following command.
npm install -g create-react-appStart a new project using create-react-app command as follows
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstartAll the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use NumericTextBox component.
To install NumericTextBox component, use the following command
npm install @syncfusion/ej2-react-inputs –saveNow, you can start adding NumericTextBox component to the application. We have added NumericTextBox component in src/App.tsx
file using following code.
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10} /> ,document.getElementById('numericContainer'));Import the NumericTextBox component’s required CSS references as follows in src/App.css.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";Note: If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.
Now use the npm run start command to run the application in the browser.
npm run startThe below example shows the NumericTextBox.
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10} />, document.getElementById('numericContainer'));You can set the minimum and maximum range of values in the NumericTextBox using the min and
max properties, so the numeric value should be in the min and max range.
The validation behavior depends on the strictMode property.
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets the minimum and maximum range values
// strictMode has been enabled by defualt
ReactDOM.render(<NumericTextBoxComponent min={10} max={20} value={16} step={2}/>, document.getElementById('numericContainer'));import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets the minimum and maximum range values
// strictMode has been enabled by defualt
ReactDOM.render(<NumericTextBoxComponent min={10} max={20} value={16} step={2} />
,document.getElementById('numericContainer'));User can set the format of the NumericTextBox component using format
property. The value will be displayed in the specified format, when the component is in focused out state. For more information about
formatting the value, refer to this link.
The below example demonstrates format the value by using currency format value c2.
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='c2' value={10}/>, document.getElementById('numericContainer'));import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets currency with 2 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent format='c2' value={10} />
,document.getElementById('numericContainer'));You can restrict the number of decimals to be entered in the NumericTextBox by using the decimals
and validateDecimalOnType properties.
So, you can’t enter the number whose precision is greater than the mentioned decimals.
validateDecimalOnType is false, number of decimals will not be restricted.
Else, number of decimals will be restricted while typing in the NumericTextBox.import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// restricts number of decimals to be entered in the NumericTextBox by enabling validateDecimalOnType property
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent validateDecimalOnType={true} decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Enabled' floatLabelType='Auto'/>, document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// validateDecimalOnType is false by default. So, number of decimals will not be restricted.
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Disabled' floatLabelType='Auto'/>, document.getElementById('numericContainer2'));import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// restricts number of decimals to be entered in the NumericTextBox by enabling validateDecimalOnType property
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent validateDecimalOnType={true} decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Enabled' floatLabelType='Auto' />
,document.getElementById('numericContainer1'));
// initializes NumericTextBox component
// validateDecimalOnType is false by default. So, number of decimals will not be restricted.
// sets number of decimal places to be allowed by the NumericTextBox
// sets number with 3 numbers of decimal places format
ReactDOM.render(<NumericTextBoxComponent decimals={3} format='n3' value={10} placeholder='ValidateDecimalOnType Disabled' floatLabelType='Auto' /> ,document.getElementById('numericContainer2'));