A simple and customizable react phone number dropdown component. It can mix up with your designed theme and give a fluent vibe able dropdown area in your next project.
- SSR Friendly
- Customizable
- Multi Design
- Search Country
- Smallest Bundle Size (About 98kb)
- Typescript support
$ npm i react-simple-phone-input --save
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/style.css";
<PhoneInput
country="US"
placeholder="Add your phone"
onChange={(data: PhoneInputResponseType) => console.log(data)}
/>
| Name |
Type |
Description |
Is Required |
Example |
| country |
string |
initial country |
required |
"BD" |
| placeholder |
string |
Input Field Placeholder Text |
required |
Type your phone number |
| value |
string |
Input field state value or default value |
optional |
|
| iconComponent |
ReactNode |
Dropdown Icon component for changing default icon |
optional |
<Icon icon="icon-name" /> |
| inputProps |
InputHTMLAttributes |
Props to pass into the input field |
optional |
|
| onlyCountries |
array |
Show only country in dropdown menu with Country Codes |
optional |
["BD", "US", "AF", "AL"] |
| excludeCountries |
array |
If you want to remove some country to the list. If you give excludeCountries then onlyCountries not works |
optional |
["AF", "AL"] |
| preferredCountries |
array |
Country codes to show on the top of the dropdown menu |
optional |
["BD", "US"] |
| searchPlaceholder |
string |
Search input field placeholder |
optional |
|
| searchIconComponent |
ReactNode |
If search enabled, custom search icon to show on search bar |
optional |
<Icon icon="icon-name" /> |
| searchProps |
InputHTMLAttributes |
Props to pass into the search input field |
optional |
|
| searchNotFound |
string |
Error message when search result is empty! |
optional |
|
| Name |
Default |
Description |
| showDropdownIcon |
true |
Show or Hide dropdown icon |
| dialCodeInputField |
false |
Show calling code into into field or show beside country flag. For more, see example |
| search |
true |
Show or Hide search input field |
| showSearchIcon |
true |
Show or Hide search icon |
| disableDropdownOnly |
false |
Disable dropdown menu list |
| disableInput |
false |
Disable input field |
| Event Name |
Description |
Example |
| onChange |
To get the value from component. You get following field
countrycodedialCodevaluevalueWithoutPlus
|
onChange={(data: PhoneInputResponseType) => console.log(data)} |
| Name |
Type |
Description |
| containerClass |
string |
class name for container |
| buttonClass |
string |
class name for dropdown button |
| dropdownClass |
string |
class name for dropdown area/menu |
| dropdownListClass |
string |
class name for dropdown list |
| dropdownIconClass |
string |
class name for dropdown icon |
| searchContainerClass |
string |
class name for search bar container |
| searchInputClass |
string |
class name for search input field |
| searchIconClass |
string |
class name for search icon |
| inputClass |
string |
class name for search icon |
| Name |
Description |
| containerStyle |
phone Input Container style |
| buttonStyle |
style for dropdown button |
| dropdownStyle |
style for dropdown menu/area |
| dropdownListStyle |
style for dropdown list |
| dropdownIconStyle |
style for dropdown icon |
| searchContainerStyle |
search container style |
| searchInputStyle |
search input field style |
| searchIconStyle |
search icon style |
| inputStyle |
input field style |
note: version 5 released. see the changelogs
- Code style changes not allowed
- Do not create issues about incorrect or missing country data
If you face any issues, missing data or wrong data about country, you are welcome to create an issue.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent