Dynamically Format Phone Numbers by Country in the KendoReact MaskedTextBox

Environment

Product Version	8.2.0
Product	Progress® KendoReact MaskedTextBox

Description

How can I dynamically format a phone number based on a country code selected from a DropDownList using the MaskedTextBox?

Solution

1. Define a list of countries with their corresponding phone number masks and prefixes:

jsx

const countries = [
    { name: 'Andorra', code: '🇦🇩', mask: '000-000-000', prefix: '+376' },
    { name: 'Germany', code: '🇩🇪', mask: '0000-0000000', prefix: '+49' }
];

2. Handle the onChange event of the DropDownList to update the selected country and mask format:

jsx

const handleCountryChange = (event) => {
    const selected = countries.find((country) => country.code === event.target.value);
    setSelectedCountry(selected);
    setMask(selected ? selected.mask : '');
    setValue('');
    setFormattedValue('');
};

3. Handle the onChange event of the MaskedTextBox to update the input value, apply the mask format and dynamically format the phone number:

jsx

const handleOnChange = (event) => {
    const newValue = event.target.value;
    setValue(newValue);
    const cleanValue = newValue.replace(/[^0-9]/g, '');
    if (selectedCountry) {
        setFormattedValue(`${selectedCountry.prefix}${cleanValue}`);
    } else {
        setFormattedValue(newValue);
    }
};

Change Theme

Theme

Loading ...