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 --saveimport { 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
| 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.
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- - https://.com/siamahnaf
