How to add Phone Number Input in React.js ? Last Updated : 02 Nov, 2023 Comments Improve Suggest changes Like Article Like Report Phone Number Input in React JS includes features like country code and number validation. It is an important part when you are creating a form input with a Phone number as the input field. Approach to Add Phone Number Input in React JS To add our phone input we are going to use the react-phone-input-2 package. The react-phone-input-2 package helps us to integrate the phone input into our app. So first, we will install the react-phone-input-2 package and then we will add a phone input on our homepage. Steps to create React ApplicationStep 1: You can create a new ReactJs project using the below command: npx create-react-app gfgStep 2: Move to the Project Directory cd gfgStep 3: Now we will install the react-phone-input-2 package using the below command npm i react-phone-input-2Project Structure: The updated dependencies in package.json file will look like: { "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-phone-input-2": "^2.15.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }}Example: we are importing the PhoneInput component and useState hook from react. Then we are using the useState hook to store the value of the phone number. After that, we are adding our phone input using the installed package. JavaScript // Filename - App.js import React, { useState } from "react"; import PhoneInput from "react-phone-input-2"; import "react-phone-input-2/lib/style.css"; import "./App.css"; export default class PhoneInputGfg extends React.Component { constructor(props) { super(props); this.state = { phone: "" }; } render() { return ( <div className="App"> <h1 className="geeks">GeeksforGeeks</h1> <h3>Phone Number Input In React JS</h3> <PhoneInput className="number" country={"us"} value={this.state.phone} onChange={(phone) => this.setState({ phone }) } /> </div> ); } } CSS /* Filename - App.js */ .App { text-align: center; margin: auto; justify-content: center; } .geeks { color: green; } .number { width: 300px; margin: auto; } Steps to run the application: Run the below command in the terminal to run the app. npm startOutput: This output will be visible on http://localhost:3000/ on browser window. Output gif for phone number input Comment More infoAdvertise with us Next Article How to add Phone Number Input in React.js ? I imranalam21510 Follow Improve Article Tags : JavaScript Web Technologies ReactJS React-Questions Similar Reads How to Add Phone Number Input in React Native ? React Native is a JavaScript framework for cross-platform mobile app development. In this article, we'll see how to add a phone number input field in a React Native app using Expo CLI.âAdding a phone number input field in React Native is helpful for collecting user phone numbers during registration 3 min read How to add Phone Input in Next.js ? In this article, we are going to learn how we can add phone input in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.ApproachTo add our phone input we are going to use the react-phone-input-2 packa 2 min read How to add code input in React JS? In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our 2 min read How to add Tag Input in Next.js ? In this article, we are going to learn how we can add Tag input in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.Approach: To add our tag input, we are going to use the react-tag-input-component 2 min read How to add Input Slider in React JS ? We will learn how to add an input slider in React JS. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It was introduced by Facebook and a community of individual developers and companies. Prerequisites:Node JS or NPMReact JSReact useStateAp 2 min read How to Add Tag Input in React Native ? Tags are widely used for managing items or categories in UI. Adding a tag input feature in React Native allows users to dynamically add and remove tags, enhancing data organization and filtering in applications. In this article, we will see how we can add tag input in react native application. We ar 4 min read How to add AutoSize Input in React.js ? We are going to learn how we can add AutoSize input in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. Prerequisites:Nodejs and NPMReact JSApproach: Â To add our autosize input we are going to use the react-input-autosize package. T 2 min read How to Create Phone numbers and Contacts List in ReactJS ? This article will guide you through creating a Contacts Manager application in React, styled with Bootstrap and enhanced with Font Awesome icons. The application will allow you to add, edit, and delete contacts using modal dialogs.Approach:Create a new React project using create-react-app.Create a r 4 min read React Chakra UI Form Number Input React Chakra UI Form Number Input is a powerful and user-friendly component tailored for efficient numeric data entry in web applications. Built on the Chakra UI foundation, this component seamlessly integrates into React applications, providing developers with a simple yet customizable solution for 2 min read How to set input box to be a floating number in ReactJS ? When working with forms in ReactJS, you may encounter scenarios where you need to accept floating-point numbers as input from users. We will set an input box to accept floating numbers in ReactJS and handle the validation of the entered values. PrerequisitesReact JS NPM and Node.jsApproach If we wan 2 min read Like