🌍 react-global-phone-input

📱 A beautiful, customizable phone number input with country selector, real-time validation, and automatic formatting for React applications.

Features

• 🌍 Easy country selection with searchable dropdown
• 🔢 Automatic formatting based on selected country
• ✅ Real-time validation using Google's libphonenumber
• 🎨 Fully customizable styling and components
• 📱 Responsive design works on all devices
• ⚡ Zustand-powered efficient state management
• 🌐 International support for 200+ countries
• 🛡️ TypeScript support included

Installation

npm install react-global-phone-input
# or
yarn add react-global-phone-input

Peer Dependencies

npm install react react-dom zustand libphonenumber-js
# or
yarn add react react-dom zustand libphonenumber-js

Basic Usage

import React, { useState } from "react";
import PhoneInput from "react-global-phone-input";
import "react-global-phone-input/dist/react-global-phone-input.css";

function App() {
  const [phone, setPhone] = useState("");

  return (
    <div className="app">
      <PhoneInput value={phone} onChange={setPhone} defaultCountry="us" />
    </div>
  );
}

export default App;

Advanced Usage

Controlled Component with Validation

import React, { useState } from "react";
import PhoneInput from "react-global-phone-input";

function App() {
  const [phone, setPhone] = useState("");
  const [error, setError] = useState("");

  const handleChange = (value, country, fullNumber) => {
    setPhone(value);

    if (country && !country.validate(fullNumber)) {
      setError("Invalid phone number for selected country");
    } else {
      setError("");
    }
  };

  return (
    <div className="form-group">
      <label>Phone Number</label>
      <PhoneInput
        value={phone}
        onChange={handleChange}
        defaultCountry="ar" // Argentina
        placeholder="Enter phone number"
        error={!!error}
      />
      {error && <div className="error-message">{error}</div>}
    </div>
  );
}

Custom Styling

<PhoneInput
  value={phone}
  onChange={setPhone}
  style={{
    container: { border: "2px solid #e2e8f0", borderRadius: "8px" },
    input: { padding: "12px 15px", fontSize: "16px" },
    dropdown: { backgroundColor: "#f8fafc" },
    flag: { width: "32px" },
  }}
  inputStyle={{ width: "100%" }}
  dropdownStyle={{ maxHeight: "300px" }}
  flagStyle={{ borderRadius: "4px" }}
/>

Country Object

interface Country {
  name: string;
  iso2: string;
  dialCode: string;
  priority: number;
  areaCodes: string[] | null;
  validate: (phone: string) => boolean;
}

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

License

MIT © Mauricio Gastón Lúquez

Created with ❤️ by Mauricio Gastón Lúquez. If you find this package useful, please consider starring it on GitHub!