react-phone-input-with-country v1.0.1

react-phone-input-with-country

A customizable React component for phone number input with country code selection.

Features

• Two input styles: simple and country selection dropdown
• Customizable placeholders
• Customizable styles
• Validation based on country-specific phone number patterns
• TypeScript support

Installation

npm install react-phone-input-with-country

or

yarn add react-phone-input-with-country

Usage

import React from 'react';
import PhoneInput from 'react-phone-input-with-country';

const App = () => {
  const handleChange = (phoneNumber, isValid) => {
    console.log(phoneNumber, isValid);
  };

  return (
    <div>
      <h2>Simple Input</h2>
      <PhoneInput 
        type="simple" 
        onChange={handleChange} 
        placeholder="Enter phone number"
      />

      <h2>Input with Country Selection</h2>
      <PhoneInput 
        type="country" 
        onChange={handleChange} 
        placeholder="Enter phone number"
        dropdownPlaceholder="Select country"
      />
    </div>
  );
};

export default App;

Props

Styling

You can style the component using the className and style props. The component uses a flexbox layout, so you can easily adjust the layout of the input and dropdown.

Validation

The component validates the phone number based on the selected country's phone number pattern. The onChange callback provides an isValid boolean indicating whether the current input is valid for the selected country.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.