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

$ pnpm i react-simple-phone-input

Usage

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

<PhoneInput
    country="US"
    placeholder="Add your phone"
    onChange={(data: PhoneInputResponseType) => 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
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

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