Siam Ahnaf React Simple Phone Input ========== 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. ## Features - SSR Friendly - Customizable - Multi Design - Search Country - Smallest Bundle Size (About 98kb) - Typescript support ## Installation ```shell-script $ pnpm i react-simple-phone-input ``` ## Usage ```jsx import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input"; import "react-simple-phone-input/dist/index.css"; console.log(data)} /> ``` #### [See Demo](https://react-phone-input.siamahnaf.com/) ## Options
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
## Other Options
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
Event Name Description Example
onChange To get the value from component. You get following field
  • country
  • code
  • dialCode
  • value
  • valueWithoutPlus
 onChange={(data: PhoneInputResponseType) => console.log(data)}
## ClassName
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
## Customize styles
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 6 released. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v6.0.0) ## Issues or correction If you face any issues, missing data or wrong data about country, you are welcome to create an issue. ## Connect with me