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

Question

Как форматировать инпут с 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);
       }}
   />

Answer 1

Используйте библиотеку 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)) }

БЛОГ НА HUSL

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

Ответы (1 шт):