ReactJS UI Ant Design InputNumber Component

21 May, 2021
Ant Design Library has this component pre-built, and it is very easy to integrate as well. InputNumber Component allows the user to enter a number within a certain range with the help of a keyboard or mouse. We can use the following approach in ReactJS to use the Ant Design InputNumber Component.
InputNumber Methods:
blur(): This method is used to remove the focus from the element.
focus(): This method is used to get the focus on the element.
InputNumber Props:
autoFocus: It is used to get the focus when the component is mounted.
bordered: It is used to specify whether it has border style or not.
decimalSeparator: It is used to indicate the decimal separator.
defaultValue: It is used to specify the initial value.
disabled: It is used to disable the input.
formatter: It is used to specify the format of the value presented.
keyboard: It is used to enable keyboard behavior.
max: It is used to denote the maximum value.
min: It is used to denote the minimum value.
parser: It is used to specify the extracted value from formatter.
precision: It is used to denote the precision of input value.
readOnly: It is used to make the input read-only.
size: It is used to indicate the height of the input box.
step: It is used to denote the number to which the current value is decreased or increased.
stringMode: It is used to set value as string to support decimals of high precision.
value: It is used to denote the current value.
onChange: It is the callback function which is triggered when the value is changed.
onPressEnter: It is the callback function which is triggered when the user press the enter key.
onStep: It is the callback function which is triggered when the user clicks up or down buttons.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install antd
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React, { useState } from 'react'import "antd/dist/antd.css";import { InputNumber } from 'antd';  export default function App() {    // Our state to hold current value of input  const [currentValue, setCurrentValue] = useState(0)    return (    <div style={{ display: 'block', width: 700, padding: 30 }}>      <h4>ReactJS Ant-Design InputNumber Component</h4>      <InputNumber min={0} defaultValue={0}        onChange={(value) => {          setCurrentValue(value)        }} /> <br />      Current Entered Value : {currentValue}    </div>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/input-number/
ReactJS-Ant Design
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
How to append HTML code to a div using JavaScript ?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components