Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaihotz/react-phonenr-input
An intuitive phone number input with country selector for international and national phone numbers
https://github.com/kaihotz/react-phonenr-input
input-field phone-code phone-country phone-input phone-number react rollup
Last synced: 4 days ago
JSON representation
An intuitive phone number input with country selector for international and national phone numbers
- Host: GitHub
- URL: https://github.com/kaihotz/react-phonenr-input
- Owner: KaiHotz
- License: mit
- Created: 2019-02-26T06:22:52.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-08T15:41:37.000Z (17 days ago)
- Last Synced: 2024-12-16T06:02:47.364Z (9 days ago)
- Topics: input-field, phone-code, phone-country, phone-input, phone-number, react, rollup
- Language: TypeScript
- Homepage: https://kaihotz.github.io/React-PhoneNr-Input/
- Size: 32.9 MB
- Stars: 74
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React-PhoneNr-Input
[](https://www.npmjs.com/package/react-phonenr-input)
[](https://github.com/KaiHotz/react-formik-ui/blob/master/LICENSE)
## Overview
React-PhoneNr-Input is a simple to use phonenumber input field with country selection, that by default, intuitively guesses the country for- and formats the entered phonenumber
For International phonenumbers a dropdown menu is available to select ya country from.
By passing the prop `format='NATIONAL'` and a default country e.g. `defaultCountry='DE'` a simple input field is shown that formats the entered phonenumber with the national format declared by the `defaultCountry` prop.
All written with less than 300 lines of code
### Demo and Examples [here](https://kaihotz.github.io/React-PhoneNr-Input/)
## Installation
npm:
```sh
npm i -S react-phonenr-input
```
yarn:
```sh
yarn add react-phonenr-input
```
#### Props:
Name
Type
Default
Description
onChange
(data: PhoneNumber) => void
required
The function/method that returns the entered phonenumber or phonenumber object
withCountryMeta
boolean
false
changes the retuned value into an Object that contains the phonenumber and the country information.
eg.:
{
phoneNumber: "+49 176 12345678",
country: {
name: "Germany (Deutschland)"
iso2: "DE"
}
}
className
string
undefined
Adds a custom class to the Phonenumber Input Field
defaultCountry
IsoCode
undefined
Sets the default country (use iso alpha-2 country code e.g 'US', 'GB', 'DE')
disabled
boolean
false
Disables the Phonenumber Input Field
format
NumberFormat
'INTERNATIONAL'
One of: 'INTERNATIONAL', 'NATIONAL'. Sets the format of the entered phonenumber, in case of 'NATIONAL' the defaultCountry must be set
initialValue
string
undefined
Sets the initial Value of the Phonenumber Input. This is usefull in case you need to set a phonenumber stored for example in a database
placeholder
string
undefined
Sets the Placeholder text
preferredCountries
IsoCode[]
undefined
Lets you restrict the country dropdown to a specific list of countries (use iso alpha-2 country code e.g 'US', 'GB', 'DE')
regions
"asia" | "europe" | "africa" | "north-africa" | "oceania" | "america" | "carribean" | "south-america" | "ex-ussr" | "european-union" | "middle-east" | "central-america" | "north-america" | Region[]
undefined
Lets you restrict the country dropdown to a list of countries in the specified regions
###### In addition to the here listed Props you can pass all other properties that can be used on a normal Html input field
#### Code example:
```tsx
import React, { useState } from 'react'
import { PhoneInput, PhoneNumber } from 'react-phonenr-input';
const Example = () => {
const [value, setValue] = useState('')
const handleChange = (phoneNumber: PhoneNumber) => {
// Do something with the phoneNumber
setValue(phoneNumber)
}
return (
)
}
```
#### Optimized for Mobile usage
## Support
If you like the project and want to support my work, you can buy me a coffee :)
[](https://paypal.me/kaihotz)