React Phone Number Validation

React Phone Number Validation is a React component library that provides a customizable phone input field with a dropdown menu for selecting countries. This component simplifies the process of collecting phone numbers from users while allowing them to easily choose their country code.

Live Demo

To test React Phone Number Validation on CodeSandbox, click here.

Installation

You can install react-phone-number-validation via npm or yarn:

npm install react-phone-number-validation
# or
yarn add react-phone-number-validation

Usage

Once installed, you can use the PhoneInput component in your React application:

import React, { useState } from "react";
import PhoneInput from "react-phone-number-validation";

const App = () => {
  const [phoneNumber, setPhoneNumber] = useState("");

  const handleChange = (value, country) => {
    // Handle phone number change
    console.log("Phone Number:", value);
    console.log("Selected Country:", country);
    setPhoneNumber(value);
  };

  return (
    <PhoneInput
      value={phoneNumber} // Current value of the phone number input (required)
      setValue={setPhoneNumber} // Function to set the value of the phone number input (required)
      onChange={handleChange} // Function called when the phone number changes (required)
    />
  );
};

export default App;

Props

Prop	Type	Description	Default
country	String	Set default country (e.g., 'gb' for United Kingdom).	'af'
inputClass	String	Custom class for the input element (optional).
dropdownClass	String	Custom class for the dropdown element (optional).
autoSelectCountry	Boolean	Auto-select country based on user location (optional).	false
enableSearch	Boolean	Enable country search (optional).	false
disableDropdown	Boolean	Disable dropdown (optional).	false
countryCodeEditable	Boolean	Allow user to edit country code (optional).	true
hideAsterisk	Boolean	Hide asterisk for required fields (optional).	false
value	String	Input value (required).
setValue	Function	Callback function to update input value (required).
onChange	Function	Callback function to handle input change (required).
dropdownStyle	Object	Custom style for dropdown (optional).
searchPlaceholder	String	Search placeholder (optional).	'Search'
name	String	Input name (optional).	''
required	Boolean	Required field (optional).	false
searchNotFound	String	Search not found message (optional).	'No Country Found'
isValidMessage	String	Validation message (optional).	'Invalid Phone Number'
onRender	Function	Callback function to handle render (optional).	(value, country) => console.log(value, country)

Meta Dev Zone – @meta-dev-zone