v7.0.0

🚨 BREAKING CHANGE

Upgrade to MUI V6 ONLY. V5 is no more compatible. If you want more features and bug fixes from this package, you should consider upgrade your codebase to V6.

Fixes

• #164 focusOnSelectCountry prop is now working properly ;
• #157 A new prop is coming : FlagIconButtonProps to let you customize the aria-label of the button:
  • Type: Partial<IconButtonProps>
  • Default: undefined

This prop let you to customize the IconButton component of the flag.

Example

<MuiTelInput FlagIconButtonProps={{ 'aria-label': 'Ouvrir la liste des pays' }} />

v6.0.1

Fix

• Type error using MuiTelInputProps after updating from MUI v6.0.2 to v6.1.0 #156

V.6.0.0

Feat

• Upgrade to MUI V6 (Still compatible with V5). No breaking change. Fix #154
• Update deps

v5.1.2

Fixes

• #129 Expose flagImage className

v5.1.1

Features

• #116: Expose css selector to select flag (Thanks to @spicattutti)

That means you can do this now:

import { styled } from 'styled-component' // or emotion
import { MuiTelInput, classes } from 'mui-tel-input'

const WithStyledFlag = styled(MuiTelInput)`
  .${classes.flag} > img {
    filter: grayscale(100%);
    width: 20px;
  }
`

function MyComponent() {
  return <WithStyledFlag />
}

v5.1.0

Fix

Validation phone (matchIsValidTel)

• #88 : Excluded country numbers continue to be formatted

What changed ?

Previously, matchIsValidTel give you true if your phone number is correct whatever the country. But what if the country of the phone has been excluded to the component?

Example:

import { MuiTelInput } from 'mui-tel-input'

<MuiTelInput excludedCountries={['FR']} />

import { matchIsValidTel } from 'mui-tel-input'

matchIsValidTel('+33626766XXX') // `true` but no, `FR` country has been excluded :(

How to solve it with version >= 5.1.0?

import { matchIsValidTel } from 'mui-tel-input'

matchIsValidTel('+33626766XXX',  { excludedCountries: ['FR'] }) // `false` :)

You can also pass onlyCountries and continents to the second object parameter.

More details:

export declare function matchIsValidTel(text: string, options?: {
    excludedCountries?: MuiTelInputCountry[];
    onlyCountries?: MuiTelInputCountry[];
    continents?: MuiTelInputContinent[];
}): boolean;

• Fix: #106
• docs: #126 Add Next.Js instructions to the documentation

Chore

• Update deps

v5.0.0

Hope you're doing well! Let's explore the new major version of mui-tel-input!

Breaking change

What we changed ?

Firstly, we removed the use of the picture HTML element for all flags. There is no responsive logic to handle, and the .webp format is compatible with all modern browsers.

Now, a flag is no longer a picture but just an img html element with the .webp format.

For example, the France flag looks like:

<img src="https://flagcdn.com/w40/fr.webp" loading="lazy" width="26" alt="France">

But what if you want to customize it and perhaps use another CDN or even your own flag icons like SVG components?

2 new props : getFlagElement and unknownFlagElement

NEW PROP : getFlagElement

With this new version, you can now customize the flag as you wish.

Two new props, getFlagElement and unknownFlagElement, empower you to use your own flag library, CDN, SVGs, etc. For those who desire offline functionality, it's now possible as you can pass your SVG (no internet connection required).

getFlagElement is a callback prop that will be called for each flag (excluding the unknown flag):

type GetFlagElement = (
  isoCode: MuiTelInputCountry,
 {
    countryName: string
    isSelected: boolean
    imgProps: React.ComponentPropsWithRef<'img'>
  }
) => React.ReactNode

import React from 'react'
import FlagFR from 'my-svg/fr/flag'
import FlagBE from 'my-svg/be/flag'
import { MuiTelInput, MuiTelInputCountry } from 'mui-tel-input'

const flags: Partial<Record<MuiTelInputCountry, React.ElementType>> = {
  FR: FlagFR,
  BE: FlagBE
}

export const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleChange = (newPhone: string) => {
    setPhone(newPhone)
  }

  return (
    <MuiTelInput
      onlyCountries={['FR', 'BE']}
      value={phone}
      {/* You could also use another CDN, use 'styled-component', or whatever you want...
      isSelected is for the `button` that contains the selected country flag, maybe you want to add border for example... */}
      getFlagElement={(isoCode, { imgProps, countryName, isSelected }) => {
        const Component = flags[isoCode]
        return <Component aria-label={countryName} />
      }}
      onChange={handleChange}
    />
  )
}

NEW PROP : unknownFlagElement

This prop let you to customize the unknown flag as requested here #46.

import React from 'react'
import { MuiTelInput } from 'mui-tel-input'
import unknownFlag from 'path/to/what/u/want'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleChange = (newPhone: string) => {
    setPhone(newPhone)
  }

  return (
    <MuiTelInput 
       value={phone} 
       onChange={handleChange} 
       {/* Could be SVG, another CDN, etc... */}
       unknownFlagElement={<img src={unknownFlag} loading="eager" width={26} alt="unknown" />}  
    />
  )
}

flagSize prop has been removed

This prop has been removed as you can customize it by using the getFlagElement prop.

TypeScript only :

• If forceCallingCode is set to true, the defaultCountry prop is required.

v4.0.1

Fixes

• Fix #87
• Fix #95

Chore

• Update deps

v4.0.0

Breaking Change

• Minimal version of React is now 18.0.0. Version 17 is not supported anymore.

v3.2.1

Fixes

• Remove umd format from build process, because of Vite 4 issues...