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.

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