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.