[hook] Create usePaste hook

[montanaaq]

Предложение: хук usePaste

Привет! Я делаю поле ввода номера телефона с маской (+7 (999) 999-99-99) с помощью useMask из этой библиотеки и столкнулся с проблемой, когда пользователь вставляет полный номер, например 89990009991 или +79990009991.

Сейчас маска просто обрабатывает вставленные символы по одному и не понимает, что нужно отбросить ведущую 8 или +7, поэтому получается некорректный результат (+7 (899) 900-09-99 вместо +7 (999) 000-09-91).

На данный момент я решаю это вручную через обработчик onPaste: получаю текст из event.clipboardData.getData('text'), очищаю его, а затем заново устанавливаю значение через нативный setter, чтобы useMask обработал его как обычный ввод. Это работает, но получается довольно много шаблонного кода для задачи, которая кажется достаточно распространённой (маски ввода, поля с тегами, вставка URL, ID и т.д.).

Можно ли добавить в библиотеку небольшой хук usePaste?

[debabin]

Hi @montanaaq, sorry for the slow reply! For now a dedicated usePaste hook isn't needed for the mask — this can be handled either through onPaste in register, or via the useEventListener hook: https://reactuse.org/functions/hooks/useEventListener

That said, I've been thinking about adding a way to modify the value inside the hook itself. That would make scenarios like this easier to support and would let you get the value on every change.

All examples are below.

Привет, @montanaaq! Прости за долгий ответ. На данный момент отдельный хук usePaste для маски не нужен — это можно реализовать либо через onPaste в register, либо через хук useEventListener: https://reactuse.org/functions/hooks/useEventListener

При этом я подумал о том, чтобы добавить в сам хук возможность изменять значение. Это упростит поддержку подобных сценариев и позволит получать значение на каждое изменение.

Все примеры ниже.

import { useMask } from "./useMask";

/**
 * Два способа отбросить код страны при вводе телефона в маску
 * "+7 (999) 999-99-99":
 *
 *  1. PhoneField  — новый проп sanitize: нормализация встроена в хук и
 *     работает во всех точках входа (набор, вставка, setValue).
 *  2. PastePhoneField — «сырой» способ без sanitize: всё делаем вручную
 *     в onPaste, как раньше — перехватываем вставку, чистим текст и
 *     задаём значение через setValue.
 */

// Отбрасываем код страны РФ: 11 цифр с ведущей 8/7 -> 10 цифр номера.
const normalizeRuPhone = (raw: string) => {
  const digits = raw.replace(/\D/g, "");
  if (digits.length === 11 && (digits[0] === "8" || digits[0] === "7")) {
    return digits.slice(1);
  }
  return digits.slice(0, 10);
};

/* ------------------------------------------------------------------ */
/* 1. sanitize — нормализация встроена в хук                           */
/* ------------------------------------------------------------------ */
function PhoneField() {
  const phone = useMask("+7 (999) 999-99-99", {
    sanitize: normalizeRuPhone,
  });

  const { rawValue, maskedValue, filled } = phone.watch();

  return (
    <div>
      <h3>1. sanitize (встроено в useMask)</h3>
      <input {...phone.register()} placeholder="+7 (___) ___-__-__" />
      <div>
        <button type="button" onClick={() => phone.setValue("89990009991")}>
          setValue("89990009991")
        </button>{" "}
        <button type="button" onClick={() => phone.setValue("+79990009991")}>
          setValue("+79990009991")
        </button>{" "}
        <button type="button" onClick={() => phone.reset()}>
          reset
        </button>
      </div>
      <div>
        <small>raw: {rawValue || "—"}</small>
        <br />
        <small>masked: {maskedValue || "—"}</small>
        <br />
        <small>filled: {String(filled)}</small>
      </div>
      <small>
        работает при наборе, вставке и setValue — код страны срезается
      </small>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* 2. «Сырой» способ через onPaste (без sanitize)                      */
/* Перехватываем вставку сами, нормализуем текст и задаём через         */
/* setValue. Именно так задачу решали до появления пропа sanitize.      */
/* ------------------------------------------------------------------ */
function PastePhoneField() {
  const phone = useMask("+7 (999) 999-99-99");

  return (
    <div>
      <h3>2. onPaste вручную (без sanitize)</h3>
      <input
        {...phone.register({
          onPaste: (event) => {
            event.preventDefault();
            const text = event.clipboardData?.getData("text") ?? "";
            phone.setValue(normalizeRuPhone(text));
          },
        })}
        placeholder="+7 (___) ___-__-__"
      />
      <small>
        вставьте <code>+79990009991</code> или <code>89990009991</code> —
        нормализация вручную в onPaste
      </small>
    </div>
  );
}

export default function App() {
  return (
    <div
      style={{ fontFamily: "system-ui", maxWidth: 560, margin: "40px auto" }}
    >
      <h1>useMask: отбрасывание кода страны</h1>
      <p>
        В обоих полях вставка/ввод <code>89990009991</code> или{" "}
        <code>+79990009991</code> даёт <code>+7 (999) 000-99-91</code> — код
        страны отбрасывается до маски.
      </p>

      <PhoneField />
      <hr />
      <PastePhoneField />
    </div>
  );
}