react-simple-phone-input

React Simple Phone Input

A simple and customizable react phone number dropdown component. It can mixed up with your designed theme and give a fluent vibeable dropdown area in your next project.

Installation

$ npm i react-simple-phone-input --save

Installation

import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/cjs/index.css";

<PhoneInput
    country="US"
    placeholder="Add your phone"
    onChange={(data) => console.log(data)}
/>

See Demo

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

Event

Event Name	Description	Example
onChange	To get the value from component	onChange={(data: string) => console.log(data)}

Contributing

• Code style changes not allowed
• Do not create issues about incorrect or missing country data

Issues or correction

If you face any issues, missing data or wrong data about country, you are welcome to create an issue.

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Twitter - https://twitter.com/siamahnaf198
• Github - https://github.com/siamahnaf198

License