Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siamahnaf/react-simple-phone-input
A simple react phone input component with calling code dropdown🤷
https://github.com/siamahnaf/react-simple-phone-input
calling-codes dial-code dial-code-dropdown dropdown nextjs phone phone-dropdown phoneinput react reactjs
Last synced: about 1 month ago
JSON representation
A simple react phone input component with calling code dropdown🤷
- Host: GitHub
- URL: https://github.com/siamahnaf/react-simple-phone-input
- Owner: siamahnaf
- License: mit
- Created: 2022-12-19T05:23:10.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-17T13:09:23.000Z (3 months ago)
- Last Synced: 2024-09-17T16:24:58.484Z (3 months ago)
- Topics: calling-codes, dial-code, dial-code-dropdown, dropdown, nextjs, phone, phone-dropdown, phoneinput, react, reactjs
- Language: TypeScript
- Homepage: https://react-simple-phone-input.vercel.app/
- Size: 821 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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.
[](https://www.npmjs.com/package/react-simple-phone-input)
[](https://www.npmjs.com/package/react-simple-phone-input)
[](https://github.com/siamahnaf198/react-simple-phone-input)
[](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)
- SSR Friendly
- Customizable
- Multi Design
- Search Country
- Smallest Bundle Size (About 98kb)
- Typescript support
## Installation
```shell-script
$ npm i react-simple-phone-input --save
```
## Usage
```jsx
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import "react-simple-phone-input/dist/style.css";
console.log(data)}
/>
```
#### [See Demo](https://react-simple-phone-input.vercel.app/)
## 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
countrycodedialCodevaluevalueWithoutPlus
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 5 released. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v5.0.0)
## 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](https://www.siamahnaf.com/)
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)
## License
[](LICENSE)