📞 country-code-selector-with-flags

A modern, responsive React + TypeScript phone input component with a searchable country selector.
Supports fetching a custom country list from an API and submitting the phone number to a custom API endpoint.

🔧 Usage

import React from 'react';
import PhoneInput from 'country-code-selector-with-flags';

function App() {
  return (
    <PhoneInput
      countriesApi="https://your.api.com/countries"
      submitApi="https://your.api.com/submit-phone"
      defaultCountry="IN"
      placeholder="Enter your phone number"
      onSubmitSuccess={(res) => console.log('Success:', res)}
      onSubmitError={(err) => console.error('Error:', err)}
    />
  );
}

export default App;

✨ Features

📱 Phone number input with country code and flag

🌍 Country list dynamically fetched from a provided API

🔍 Searchable dropdown with country name, code, and flag

📤 Submits phone number and country code to a custom API

⚡ Mobile-friendly and modern UI

✅ Written in React and TypeScript

Country API Format

{ "IN": { "id": "1", "name": "India", "calling_code": "+91", "phone_length": "10" }, "PK": { "id": "2", "name": "Pakistan", "calling_code": "+92", "phone_length": "10" } }

Submit API Format

{ "phone_number ": "9876543210", "country_id": "+91" }

Props

| Prop | Type | Required | Description | | ----------------- | --------------------- | -------- | ---------------------------------------------- | | countriesApi | string | ✅ Yes | URL to fetch country data | | submitApi | string | ✅ Yes | API endpoint for POSTing phone number and code | | defaultCountry | string (optional) | ❌ No | ISO2 country code to preselect (e.g., 'IN') | | placeholder | string (optional) | ❌ No | Input placeholder text | | onSubmitSuccess | (res: any) => void | ❌ No | Callback on successful form submission | | onSubmitError | (err: any) => void | ❌ No | Callback on failed submission |

Flags

https://flagcdn.com/w40/{iso2}.png

🚀 Installation

npm install country-code-selector-with-flags