Phonecode Select

info

PhonecodeSelect is a simple and customizable phone code selector component for React applications. This component allows users to select a country phone code from a predefined list.

Usage

import React, { useState } from "react";
import { PhonecodeSelect } from "react-country-state-city";
import "react-country-state-city/dist/react-country-state-city.css";

export default function App() {
  const [phonecode, setPhonecode] = useState(null);

  return (
    <div>
      <h6>Phonecode</h6>
      <PhonecodeSelect
        containerClassName="form-group"
        inputClassName=""
        onChange={(_code) => setPhonecode(_code)}
        onTextChange={(_txt) => console.log(_txt)}
        defaultValue={phonecode}
        placeHolder="Select Phone Code"
      />
    </div>
  );
}

Live Example

Props

Name	Type	Default	Required	Description
src	string	Empty	No	The URL where the data files are hosted. Default is a CDN.
region	number	Empty	No	Filters and displays countries from a specific region.
showFlag	boolean	true	No	Displays flags when true.
defaultValue	string	null	No	The initial selected phone code.
containerClassName	string	Empty	No	Custom class name for the container.
inputClassName	string	Empty	No	Custom class name for the input field.
onChange	function	Empty	No	Callback triggered when a phone code is selected.
onTextChange	function	Empty	No	Callback fired when the input text changes.
placeHolder	string	Empty	No	Placeholder text for the input.