Форматирование телефонного номера в React

Рейтинг: 0Ответов: 1Опубликовано: 11.02.2023

Как форматировать инпут с 89098902834 на 8 (909) 890-28-34? Нужно чтобы значение менялось на событии onChange.

Код:

const [inpValue, setInputValue] = useState("");

  useEffect(() => {
   //как конвертировать номер
   }, [inpValue]);

   <input 
       type="tel"
       placeholder="+7 (999) 999-99-99"
       value = {inpValue}
       onChange={(e) => {
           setInputValue(e.target.value);
       }}
   />
css javascript html reactjs валидация
Источник: Stack Overflow на русском

Ответы

▲ 0

Используйте библиотеку libphonenumber-js.

import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'

const input = '89098902834'

const convertPhoneNumber = (inp) => {
  if (isValidPhoneNumber(inp, 'RU')) {
    const phoneNumber = parsePhoneNumber(inp, 'RU')
    return phoneNumber.formatNational()
  }
  return inp
}

convertPhoneNumber(input) // 8 (909) 890-28-34

Соответственно если вы хотите вызывать функцию в onChange, то:

onChange = {(e) => { setInputValue(convertPhoneNumber(e.target.value)) }