53 подписчика

👩‍💻 Компонент для номера телефона (продолжение)

#frontend #react

Ресёрч пришлось продолжать. Я нашёл библиотеку, которая позволяла валидировать номер телефона относительно двухбуквенного кода страны, к которой этот номер относится. Кроме прочего, в этой библиотеке есть и возможность форматирования номера телефона, как раз под маску, принятую в конкретной стране. В описании библиотеки также упоминался react-компонент, который использует эту самую библиотеку. И на основе уже этого компонента, я собрал своё решение с использованием ant-design (разумеется, оно не идеальное, но достаточно хорошее, чтобы использовать в условном продакшне):

import PhoneInput from 'react-phone-number-input';

import PropTypes from 'prop-types';

import { getCountries } from 'react-phone-number-input';

import { Select as AntdSelect } from 'antd';

const phoneCountryLabels = () => {

const countryLabels = {};

getCountries().forEach((country) => (countryLabels[country] = country));

return countryLabels;

};

const CountrySelect = ({ value, onChange, labels, variant = 'filled', ...rest }) => (

<AntdSelect

{...rest}

value={value}

showSearch

optionFilterProp="label"

onChange={onChange}

variant={variant}

size="large"

style={{ '--ant-select-single-item-height-lg': '3rem' }}

);

CountrySelect.propTypes = {

value: PropTypes.string,

onChange: PropTypes.func.isRequired,

labels: PropTypes.objectOf(PropTypes.string).isRequired,

variant: PropTypes.string,

};

const PhoneNumberInput = ({ onChange, country = 'US' }) => {

return (

<PhoneInput

onChange={onChange}

defaultCountry={country}

international

limitMaxLength

labels={phoneCountryLabels()}

countrySelectComponent={CountrySelect}

numberInputProps={{

className: 'ant-input ant-input-filled css-var-r1 ant-input-css-var base-input',

}}

</div>

);

};

PhoneNumberInput.propTypes = {

onChange: PropTypes.func.isRequired,

country: PropTypes.string,

};

export default PhoneNumberInput;

А как вы решали подобные задачи? Делитесь, будет интересно узнать.

P. S. как появится немного времени, планирую тоже самое адаптировать под vue-компонент и поделиться результатом

1 минута

9 апреля 2024