Настройка stopOnFocus

stopOnFocus — это параметр конфигурации в библиотеке Toastify, который управляет поведением уведомления при взаимодействии пользователя с ним. Он позволяет приостанавливать автоматическое исчезновение тоста, если курсор мыши находится над уведомлением, обеспечивая более удобное взаимодействие с контентом.

Синтаксис

Toastify({
  text: "Пример уведомления",
  duration: 3000,
  stopOnFocus: true
}).showToast();

Пояснение параметров:

  • text – текст уведомления.
  • duration – время отображения в миллисекундах.
  • stopOnFocus – булево значение (true или false). Если true, таймер исчезновения останавливается при наведении курсора на тост.

Работа stopOnFocus

  1. Значение true

    При наведении курсора на уведомление таймер, отвечающий за автоматическое закрытие, приостанавливается. Как только курсор покидает область тоста, таймер продолжает отсчет с того момента, на котором остановился.

    Toastify({
  text: "Наведи на меня, чтобы задержать",
  duration: 5000,
  stopOnFocus: true
}).showToast();

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

  2. Значение false

    Таймер продолжает отсчет независимо от взаимодействия с уведомлением. Даже если пользователь наведет курсор на тост, он все равно исчезнет по истечении заданного времени.

    Toastify({
  text: "Я исчезну через 3 секунды независимо от наведения",
  duration: 3000,
  stopOnFocus: false
}).showToast();

Практические сценарии использования

  • Уведомления с важной информацией: когда нужно, чтобы пользователь успел прочитать текст до того, как он исчезнет. stopOnFocus: true гарантирует, что уведомление не исчезнет случайно.
  • Короткие информативные тосты: для обычных уведомлений, где важна динамичность, используют stopOnFocus: false, чтобы не задерживать пользовательский интерфейс.

Особенности поведения

  • stopOnFocus влияет только на автоматическое закрытие уведомления, вызванное duration.
  • Взаимодействие с кнопками внутри тоста не изменяет работу stopOnFocus. Для кнопок или ссылок нужно дополнительно прописывать обработчики событий.
  • Если duration установлен в 0, тост становится постоянным, и stopOnFocus не оказывает влияния, так как таймер отсутствует.

Интеграция с другими параметрами

stopOnFocus может комбинироваться с другими настройками Toastify для более точного контроля:

  • gravity и position — положение уведомления на экране не влияет на работу stopOnFocus.
  • close — если активна кнопка закрытия, пользователь может закрыть уведомление вручную, вне зависимости от stopOnFocus.
  • callback — функция обратного вызова может использоваться для дополнительной логики после закрытия, но stopOnFocus приостанавливает только внутренний таймер.

Пример комплексной конфигурации

Toastify({
  text: "Держи курсор, чтобы прочитать полностью",
  duration: 8000,
  stopOnFocus: true,
  gravity: "top",
  position: "right",
  close: true,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold"
  },
  onClick: function() {
    console.log("Тост кликнут!");
  }
}).showToast();

В этом примере:

  • Уведомление отображается в верхнем правом углу.
  • При наведении таймер паузируется.
  • Пользователь может закрыть тост вручную.
  • Событие onClick позволяет выполнять действия при клике по уведомлению.

Выводы о stopOnFocus

  • Значение true делает уведомление более интерактивным и удобным для чтения.
  • Значение false подходит для динамичных уведомлений, которые должны исчезать строго по таймеру.
  • Комбинация с другими параметрами позволяет гибко настраивать пользовательский опыт.

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

Оглавление