Управление памятью

Для начала работы с библиотекой Toastify необходимо подключить её к проекту. Есть два способа: через CDN или с использованием пакетного менеджера npm.

Подключение через CDN:

Установка через npm:

npm install toastify-js

В проекте с модульной системой можно импортировать библиотеку следующим образом:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Создание простого уведомления

Базовый пример использования Toastify выглядит так:

Toastify({
  text: "Сообщение успешно отправлено",
  duration: 3000
}).showToast();

Пояснение ключевых параметров:

  • text — текст уведомления.
  • duration — время отображения уведомления в миллисекундах. Если указать -1, уведомление останется до закрытия вручную.

Настройка внешнего вида

Toastify позволяет гибко настраивать внешний вид уведомлений:

  • Позиция на экране:
Toastify({
  text: "Пример уведомления",
  duration: 3000,
  gravity: "top", // 'top' или 'bottom'
  position: "right" // 'left', 'center', 'right'
}).showToast();
  • Цвет и фон:
Toastify({
  text: "Успешная операция",
  duration: 3000,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold"
  }
}).showToast();
  • Добавление кнопки закрытия:
Toastify({
  text: "Сообщение с кнопкой закрытия",
  close: true,
  duration: 5000
}).showToast();

Управление событиями

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

  • Обработка клика по уведомлению:
Toastify({
  text: "Кликни по мне",
  duration: 4000,
  onClick: function() {
    console.log("Уведомление было кликнуто");
  }
}).showToast();
  • Автоматическое удаление уведомления по истечении времени — происходит по умолчанию, но при необходимости можно отключить:
Toastify({
  text: "Закрытие вручную",
  duration: -1
}).showToast();

Очередь уведомлений и управление памятью

При создании большого количества уведомлений важно контролировать их количество и предотвращать утечки памяти:

  1. Создание и хранение экземпляров:
const toastInstances = [];

function createToast(message) {
  const toast = Toastify({
    text: message,
    duration: 3000
  });
  toast.showToast();
  toastInstances.push(toast);
}
  1. Удаление уведомлений из памяти после закрытия:
toastInstances.forEach(toast => {
  toast.onCl ose = function() {
    const index = toastInstances.indexOf(toast);
    if (index > -1) toastInstances.splice(index, 1);
  };
});
  1. Лимит количества уведомлений:

Чтобы не перегружать интерфейс, можно ограничить количество одновременно отображаемых уведомлений:

const MAX_TOASTS = 5;

function createLimitedToast(message) {
  if (toastInstances.length >= MAX_TOASTS) {
    const oldestToast = toastInstances.shift();
    oldestToast.hideToast(); // скроет уведомление
  }
  createToast(message);
}

Кастомизация анимаций

Toastify поддерживает базовые CSS-анимации при появлении и скрытии уведомлений. Для сложных эффектов можно использовать кастомные классы:

Toastify({
  text: "Анимированное уведомление",
  duration: 3000,
  className: "my-toast-animation"
}).showToast();
.my-toast-animation {
  animation: slideIn 0.5s ease forwards, fadeOut 0.5s ease 2.5s forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

Интеграция с асинхронными процессами

Уведомления можно использовать для оповещения о результатах асинхронных операций, например, запросов к API:

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    if (!response.ok) throw new Error("Ошибка запроса");
    Toastify({ text: "Данные успешно загружены", duration: 3000 }).showToast();
  } catch (err) {
    Toastify({
      text: `Ошибка: ${err.message}`,
      duration: 5000,
      style: { background: "red", color: "#fff" }
    }).showToast();
  }
}

Использование и переиспользование шаблонов уведомлений

Для единообразного интерфейса удобно создавать функции-шаблоны:

function showSuccessToast(message) {
  Toastify({
    text: message,
    duration: 3000,
    style: { background: "green", color: "#fff" }
  }).showToast();
}

function showErrorToast(message) {
  Toastify({
    text: message,
    duration: 5000,
    style: { background: "red", color: "#fff" }
  }).showToast();
}

Такой подход уменьшает дублирование кода и снижает вероятность ошибок при управлении уведомлениями.

Оглавление