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...

v3.2.0

Fix

• #76 : settings InputProps.startAdornment will correctly override the startAdornment of the TextField

Thanks to @TSinChen

v3.1.3

Fixes

• Missing types #64

v3.1.2

Fixes

• #63 Remove the error Warning: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. in the dev console.