Функция usePhoneMask — это React hook, который помогает применять маску к номеру телефона при вводе.

Пример реализации на TypeScript:

import { useState, useEffect } from 'react';

interface UsePhoneMaskParams {
  mask: string; // например, '+7 (___) ___-__-__'
  initialValue?: string;
  maskPlaceholder?: string; // символ для заполнения, например '_'
}

interface UsePhoneMaskReturn {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export const usePhoneMask = ({ mask, initialValue = '', maskPlaceholder = '_' }: UsePhoneMaskParams): UsePhoneMaskReturn => {
  const [value, setValue] = useState(initialValue);

  const formatValue = (input: string) => {
    let i = 0;
    const def = mask.replace(/[^_\d]/g, '');
    let val = input.replace(/\D/g, '');
    let formatted = '';

    for (const char of mask) {
      if (char === maskPlaceholder) {
        if (val[i]) {
          formatted += val[i];
          i++;
        } else {
          formatted += maskPlaceholder;
        }
      } else {
        formatted += char;
      }
    }
    return formatted;
  };

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputVal = e.target.value;
    const formatted = formatValue(inputVal);
    setValue(formatted);
  };

  useEffect(() => {
    if (initialValue) {
      setValue(formatValue(initialValue));
    }
  }, [initialValue]);

  return { value, onChange };
};

Этот хук принимает маску, начальное значение и символ заполнителя, возвращает текущее значение и обработчик изменения, который форматирует ввод пользователя согласно маске.

export const usePhoneMask = ({ mask, initialValue, maskPlaceholder, }: UsePhoneMaskParams): UsePhoneMaskReturn => { // code here };