1.3.3 • Published 3 years ago

my-mui-tel-input v1.3.3

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

license ts npm CircleCI

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

NameTypeDescription
valuestringThe phone number value (Required)
onChange?(value, info) => voidGets called once the user updates the input or selects a new country.defaultCountry?stringCountry code to be displayed on mount.
onlyCountries?arrayCountry codes to be included.
excludedCountries?arrayCountry codes to be excluded.
preferredCountries?arrayCountry codes to be highlighted to the top of the list of countries.
continents?arrayContinent codes to include a list of countries.
forceCallingCode?booleanForce the calling code (e.g: +33) to be displayed so the value cannot be empty. Default false.
focusOnSelectCountry?booleanAutofocus the input when the user selects a country in the list. Default false.
disableDropdown?booleanNo country list / The current flag is a span instead of a button. Default false.
disableFormatting?booleanRemove format (spaces..) from the input value. Default false.
langOfCountryName?stringAn Intl locale to translate countries (see Intl locales). Default en.
MenuProps?Menu APIProps 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 classDescription
.MuiTelInput-TextFieldStyles applied to the root element.
.MuiTelInput-IconButtonStyles applied to the IconButton of the current flag.
.MuiTelInput-FlagStyles applied to a flag.
.MuiTelInput-MenuStyles applied to Menu component.
.MuiTelInput-MenuItemStyles applied to a flag item of the Menu.
.MuiTelInput-ListItemIcon-flagStyles applied to the ListItemIcon of a flag item
.MuiTelInput-ListItemText-countryStyles applied to the ListItemText of a flag item
.MuiTelInput-Typography-calling-codeStyles 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

CodeContinent
AFAfrica
ASAsia
EUEurope
NANorth America
OCOceania
SASouth America
OCOceania

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