Логирование событий

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

Через CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Через npm:

npm install toastify-js

После установки через npm библиотеку можно импортировать в проект:

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

Создание базового уведомления

Для создания простого уведомления используется функция Toastify(). В качестве обязательного параметра указывается объект с конфигурацией:

Toastify({
    text: "Событие успешно выполнено",
    duration: 3000, // Время отображения в миллисекундах
}).showToast();

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

  • text — текст уведомления.
  • duration — продолжительность отображения уведомления (по умолчанию 3000 мс).
  • destination — URL, по которому произойдёт переход при клике на уведомление.
  • close — отображение кнопки закрытия (true или false).
  • gravity — позиция уведомления по вертикали ("top" или "bottom").
  • position — позиция уведомления по горизонтали ("left", "center", "right").
  • style — объект CSS-стилей для кастомизации уведомления.

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

Toastify позволяет полностью кастомизировать внешний вид уведомления через свойство style. Например, можно изменить цвет фона, шрифт и бордер:

Toastify({
    text: "Ошибка при сохранении данных",
    duration: 5000,
    close: true,
    gravity: "top",
    position: "right",
    style: {
        background: "linear-gradient(to right, #ff5f6d, #ffc371)",
        color: "#fff",
        fontWeight: "bold",
        borderRadius: "8px",
        boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
    }
}).showToast();

Также можно использовать классические CSS-классы для единого оформления всех уведомлений:

Toastify({
    text: "Данные обновлены",
    className: "my-toast",
}).showToast();
.my-toast {
    background-color: #4caf50;
    color: white;
    font-size: 14px;
    border-radius: 6px;
}

Управление поведением уведомлений

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

  • close — позволяет пользователю закрыть уведомление вручную.
  • duration — если установлено в 0, уведомление не исчезает автоматически.
  • stopOnFocus — при значении true уведомление не исчезает, пока на него наведён курсор.
  • callback — функция обратного вызова, которая срабатывает после закрытия уведомления.

Пример использования:

Toastify({
    text: "Процесс завершён",
    duration: 4000,
    close: true,
    stopOnFocus: true,
    onClick: function() {
        console.log("Пользователь кликнул на уведомление");
    },
    callback: function() {
        console.log("Уведомление закрыто");
    }
}).showToast();

События и логирование

Для отслеживания пользовательских действий или системных событий можно использовать методы обратного вызова onClick и callback. Это удобно для создания журналов действий или уведомлений об ошибках:

function logEvent(message) {
    console.log(new Date().toISOString(), message);
}

Toastify({
    text: "Файл загружен",
    duration: 3000,
    onClick: () => logEvent("Пользователь кликнул по уведомлению о загрузке"),
    callback: () => logEvent("Уведомление о загрузке исчезло")
}).showToast();

Для интеграции с сервером можно отправлять события через fetch или WebSocket:

Toastify({
    text: "Данные отправлены на сервер",
    duration: 3000,
    onClick: () => fetch("/log", { method: "POST", body: JSON.stringify({ event: "click" }) }),
    callback: () => fetch("/log", { method: "POST", body: JSON.stringify({ event: "close" }) })
}).showToast();

Интеграция с приложениями на React и Vue

В React уведомления Toastify можно использовать через импорт и вызов функции в обработчиках событий:

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

function handleSave() {
    Toastify({
        text: "Сохранение прошло успешно",
        duration: 3000
    }).showToast();
}

В Vue использование аналогично:

methods: {
    notify() {
        Toastify({
            text: "Элемент добавлен",
            duration: 2500
        }).showToast();
    }
}

Анимации и позиции

Toastify поддерживает базовые анимации появления и скрытия, а также гибкую настройку позиции:

  • gravity: "top" | "bottom" — верх или низ экрана.
  • position: "left" | "center" | "right" — горизонтальное расположение.
  • Для кастомных анимаций можно использовать CSS-переходы через класс className:
.toast-slide {
    transform: translateY(-50px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.toast-slide.show {
    transform: translateY(0);
    opacity: 1;
}
.toast-slide.hide {
    transform: translateY(-50px);
    opacity: 0;
}

И подключение к уведомлению:

Toastify({
    text: "Сообщение с анимацией",
    className: "toast-slide"
}).showToast();

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

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

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

function showWarning(message) {
    Toastify({
        text: message,
        duration: 4000,
        style: { background: "#ff9800", color: "#fff" }
    }).showToast();
}

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

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

Оглавление