Toastr

Для работы с Toastify необходимо подключить библиотеку к проекту. Наиболее удобные способы — через CDN или через менеджер пакетов npm/yarn.

Через CDN:

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

Через npm:

npm install toastify-js

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

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

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

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

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

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

  • text — текст сообщения.
  • duration — время отображения уведомления в миллисекундах. Если не указано, по умолчанию 3000 мс.
  • gravity — положение уведомления по вертикали ("top" или "bottom").
  • position — положение по горизонтали ("left", "center", "right").

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

Для изменения стиля уведомления можно использовать несколько параметров:

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

Ключевые опции:

  • backgroundColor — цвет или градиент фона.
  • stopOnFocus — при наведении курсора на уведомление его таймер приостанавливается.
  • close — отображение кнопки закрытия.

Использование коллбэков

Toastify поддерживает функции обратного вызова при клике на уведомление или при его закрытии.

Toastify({
  text: "Нажми на меня",
  duration: 5000,
  onClick: function() {
    console.log("Уведомление кликнуто");
  },
  callback: function() {
    console.log("Уведомление закрыто");
  }
}).showToast();

Пояснение:

  • onClick вызывается при клике на уведомление.
  • callback срабатывает после завершения отображения уведомления.

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

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

Toastify({
  node: (() => {
    const element = document.createElement("div");
    element.innerHTML = '<span style="margin-right: 10px;">✔️</span>Успех!';
    return element;
  })(),
  duration: 4000,
  gravity: "top",
  position: "center"
}).showToast();

Особенности:

  • Параметр node позволяет передавать DOM-элемент вместо строки.
  • Поддерживается любой HTML-контент.

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

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

Toastify({
  text: "Первое уведомление",
  duration: 3000,
  gravity: "top",
  position: "right"
}).showToast();

Toastify({
  text: "Второе уведомление",
  duration: 3000,
  gravity: "top",
  position: "right"
}).showToast();

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

Анимации и кастомизация

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

Toastify({
  text: "Кастомное уведомление",
  className: "my-toast",
  duration: 3000
}).showToast();
.my-toast {
  font-weight: bold;
  color: white;
  background-color: #ff6f61;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

Параметры управления поведением

  • duration — время отображения уведомления, 0 делает его постоянным до ручного закрытия.
  • close — добавляет крестик для закрытия уведомления.
  • stopOnFocus — при наведении курсора уведомление не исчезает.
  • offset — сдвиг уведомления по вертикали и горизонтали:
offset: {
  x: 50, // смещение по горизонтали
  y: 100 // смещение по вертикали
}

Интеграция с другими библиотеками

Toastify легко интегрируется с любыми фреймворками: React, Vue, Angular. В React, например, можно использовать его внутри useEffect для уведомления после события:

import Toastify from 'toastify-js';

useEffect(() => {
  Toastify({
    text: "Данные успешно загружены",
    duration: 3000,
    gravity: "top",
    position: "right"
  }).showToast();
}, []);

Практические рекомендации

  • Для системных уведомлений лучше использовать разные цвета для успеха, предупреждения и ошибок.
  • Не использовать большое количество уведомлений одновременно, чтобы не перегружать интерфейс.
  • Комбинировать stopOnFocus и close для улучшения пользовательского опыта.

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

Оглавление