v5.1.9
A simple react phone input component with calling code dropdown🤷
Created by Siam Ahnaf
Basic Example
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
/>
Country Code in Input Field
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
/>
Custom Dropdown Icon
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
iconComponent={<Icon icon="bx:chevron-down" />}
/>
Only Include some country
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
onlyCountries={["BD", "AF", "US"]}
/>
Exclude Some Country from the list
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
excludeCountries={["BD", "AF", "AL"]}
/>
Preferred country to show on top
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
preferredCountries={["BD", "AF", "AL"]}
/>
Show or Hide Search
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
search={false}
/>
Change your search icon
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
searchIconComponent={<Icon icon="ic:baseline-search" />}
/>
Custom search input placeholder
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
dialCodeInputField
searchPlaceholder="Search by country"
/>
Disable Dropdown Menu/area
<PhoneInput
country="AI"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
disableDropdownOnly
searchPlaceholder="Search by country"
/>
Disable all (dropdown and input field)
<PhoneInput
country="AI"
placeholder="Add your phone"
onChange={(data) => console.log(data)}
disableInput
disableDropdownOnly
searchPlaceholder="Search by country"
/>