Применение в Svelte

Для работы с Toastify в Svelte первым шагом является установка библиотеки через npm:

npm install toastify-js

После установки необходимо импортировать CSS и JS компоненты Toastify в нужный Svelte-компонент или в главный файл приложения (App.svelte или main.js):

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

Импорт CSS обеспечивает корректное отображение всплывающих уведомлений и их анимаций.

Базовое использование

Для отображения простого уведомления достаточно вызвать метод Toastify с минимальным набором параметров:

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

Ключевые параметры:

  • text – текст сообщения, обязательный параметр.
  • duration – время отображения в миллисекундах. Значение -1 оставит уведомление до закрытия пользователем.
  • close – добавляет кнопку закрытия, true или false.
  • gravity – вертикальное положение: "top" или "bottom".
  • position – горизонтальное положение: "left", "center" или "right".
  • style – объект со стилями CSS для кастомизации уведомления.
  • className – добавление кастомного CSS-класса.

Пример уведомления с кастомными стилями и кнопкой закрытия:

Toastify({
  text: "Успешная операция",
  duration: 4000,
  close: true,
  gravity: "top",
  position: "right",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold"
  },
}).showToast();

Интеграция с реактивными событиями Svelte

В Svelte удобно использовать Toastify вместе с реактивными переменными и событиями. Например, при нажатии кнопки:

<script>
  import Toastify from "toastify-js";
  import "toastify-js/src/toastify.css";

  function notifySuccess() {
    Toastify({
      text: "Данные успешно сохранены",
      duration: 3000,
      gravity: "top",
      position: "center",
      close: true,
      style: {
        background: "#28a745",
      },
    }).showToast();
  }
</script>

<button on:click={notifySuccess}>
  Сохранить
</button>

В данном примере уведомление вызывается непосредственно при событии click, что полностью соответствует реактивной природе Svelte.

Управление динамическими сообщениями

В реальных проектах часто требуется показывать уведомления на основе состояния или асинхронных операций. Для этого удобно создавать функцию-обёртку:

<script>
  import Toastify from "toastify-js";
  import "toastify-js/src/toastify.css";

  function showToast(message, type = "info") {
    const colors = {
      info: "#3498db",
      success: "#2ecc71",
      warning: "#f1c40f",
      error: "#e74c3c"
    };

    Toastify({
      text: message,
      duration: 3500,
      close: true,
      gravity: "top",
      position: "right",
      style: {
        background: colors[type] || colors.info,
      },
    }).showToast();
  }

  async function fetchData() {
    try {
      const response = await fetch("/api/data");
      if (!response.ok) throw new Error("Ошибка загрузки");
      showToast("Данные загружены успешно", "success");
    } catch (err) {
      showToast(err.message, "error");
    }
  }
</script>

<button on:click={fetchData}>
  Загрузить данные
</button>

Такой подход позволяет централизованно управлять уведомлениями и легко изменять их стиль и поведение.

Продвинутая кастомизация

Использование HTML-контента и иконок:

Toastify позволяет вставлять HTML в уведомление через параметр node:

const node = document.createElement("div");
node.innerHTML = '<strong>Внимание!</strong> <em>Произошла ошибка</em>';

Toastify({
  node: node,
  duration: 5000,
  close: true,
  gravity: "top",
  position: "center",
}).showToast();

Последовательные уведомления:

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

const messages = ["Загрузка данных...", "Обработка...", "Готово!"];
messages.forEach((msg, i) => {
  setTimeout(() => {
    Toastify({ text: msg, duration: 2000, gravity: "top", position: "right" }).showToast();
  }, i * 2200);
});

Анимации и пользовательские события

Toastify поддерживает собственные CSS-анимации через класс className и позволяет подписываться на закрытие уведомления:

Toastify({
  text: "Закрываем через 3 секунды",
  duration: 3000,
  close: true,
  gravity: "bottom",
  position: "left",
  className: "custom-toast",
  callback: () => console.log("Уведомление закрыто")
}).showToast();

В Svelte можно использовать это для синхронизации состояния компонента с уведомлениями.

Интеграция с компонентной структурой

В крупных Svelte-приложениях имеет смысл создать отдельный компонент для уведомлений:

<script context="module">
  import Toastify from "toastify-js";
  import "toastify-js/src/toastify.css";

  export function toast(message, type = "info") {
    const colors = { info: "#3498db", success: "#2ecc71", warning: "#f1c40f", error: "#e74c3c" };
    Toastify({
      text: message,
      duration: 3000,
      gravity: "top",
      position: "right",
      close: true,
      style: { background: colors[type] || colors.info }
    }).showToast();
  }
</script>

Теперь toast можно импортировать в любом компоненте и использовать централизованно, что упрощает поддержку и изменение визуальной темы уведомлений.

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

Оглавление