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

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'simple' \| 'country' | Required | Determines the input style | | placeholder | string | 'Enter phone number' | Placeholder for the phone number input | | dropdownPlaceholder | string | 'Select country' | Placeholder for the country dropdown | | className | string | '' | CSS class name for the component container | | style | React.CSSProperties | {} | Inline styles for the component container | | onChange | (phoneNumber: string, isValid: boolean) => void | - | Callback function when the input changes |

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.