1.3.3 • Published 3 years ago
my-mui-tel-input v1.3.3
Installation
// with npm
npm install mui-tel-input
// with yarn
yarn add mui-tel-input
Usage
import React from 'react'
import { MuiTelInput } from 'mui-tel-input'
const MyComponent = () => {
const [value, setValue] = React.useState('')
const handleChange = (newValue) => {
setValue(newValue)
}
return <MuiTelInput value={value} onChange={handleChange} />
}
Phone number validation
import React from 'react'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import { MuiTelInput, isValidPhoneNumber } from 'mui-tel-input'
const MyComponent = () => {
const [value, setValue] = React.useState('')
const [isValid, setIsValid] = React.useState(false)
const handleChange = (newValue) => {
setIsValid(isValidPhoneNumber(newValue))
setValue(newValue)
}
return (
<Box>
<Typography>This is valid ? {isValid ? 'yes' : 'no'}</Typography>
<MuiTelInput value={value} onChange={handleChange} />
</Box>
)
}
Props
Name | Type | Description | |||
---|---|---|---|---|---|
value | string | The phone number value (Required) | |||
onChange? | (value, info) => void | Gets called once the user updates the input or selects a new country. | defaultCountry? | string | Country code to be displayed on mount. |
onlyCountries? | array | Country codes to be included. | |||
excludedCountries? | array | Country codes to be excluded. | |||
preferredCountries? | array | Country codes to be highlighted to the top of the list of countries. | |||
continents? | array | Continent codes to include a list of countries. | |||
forceCallingCode? | boolean | Force the calling code (e.g: +33 ) to be displayed so the value cannot be empty. Default false . | |||
focusOnSelectCountry? | boolean | Autofocus the input when the user selects a country in the list. Default false . | |||
disableDropdown? | boolean | No country list / The current flag is a span instead of a button . Default false . | |||
disableFormatting? | boolean | Remove format (spaces..) from the input value. Default false . | |||
langOfCountryName? | string | An Intl locale to translate countries (see Intl locales). Default en . | |||
MenuProps? | Menu API | Props for the Menu component. | |||
ref? | React.Ref<HTMLDivElement> | A ref pointing to the Mui TextField component. | |||
TextField Props |
Inheritance
While not explicitly documented above, the props of the TextField component are also available on MuiTelInput.
CSS
Global class | Description |
---|---|
.MuiTelInput-TextField | Styles applied to the root element. |
.MuiTelInput-IconButton | Styles applied to the IconButton of the current flag. |
.MuiTelInput-Flag | Styles applied to a flag. |
.MuiTelInput-Menu | Styles applied to Menu component. |
.MuiTelInput-MenuItem | Styles applied to a flag item of the Menu. |
.MuiTelInput-ListItemIcon-flag | Styles applied to the ListItemIcon of a flag item |
.MuiTelInput-ListItemText-country | Styles applied to the ListItemText of a flag item |
.MuiTelInput-Typography-calling-code | Styles applied to the calling code of a flag item |
You can override the style of the component with a global class name.
Country code
A "country code" is a two-letter ISO country code (like US
).
This library supports all officially assigned ISO alpha-2 country codes, plus a few extra ones like: AC
(Ascension Island), TA
(Tristan da Cunha), XK
(Kosovo).
Continent code
Code | Continent |
---|---|
AF | Africa |
AS | Asia |
EU | Europe |
NA | North America |
OC | Oceania |
SA | South America |
OC | Oceania |
TypeScript
This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.
🐛 Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
LICENSE
MIT