Плагины и расширения

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

Через npm:

npm install toastify-js

Импорт в проекте с использованием ES6:

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

Основные методы и параметры

Библиотека предоставляет метод Toastify(options) для создания уведомлений. Основные параметры:

  • text — текст уведомления.
  • duration — время отображения в миллисекундах. По умолчанию 3000.
  • close — добавление кнопки закрытия (true/false).
  • gravity — вертикальное положение: "top" или "bottom".
  • position — горизонтальное положение: "left", "center", "right".
  • backgroundColor — цвет фона уведомления.
  • className — кастомный CSS-класс для дополнительного стилирования.
  • stopOnFocus — при наведении мыши уведомление не исчезает (true/false).
  • onClick — callback-функция при клике на уведомление.

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

Toastify({
  text: "Успешная операция",
  duration: 5000,
  close: true,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50",
  onClick: () => console.log("Уведомление кликнуто")
}).showToast();

Использование плагинов и расширений

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

  • отображения иконок в уведомлениях;
  • работы с уведомлениями в стеке;
  • интеграции с фреймворками (React, Vue, Angular);
  • логирования уведомлений.

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

import ToastifyIcon from 'toastify-js-icon-plugin';

ToastifyIcon({
  icon: 'success',
  color: 'white'
});

После этого можно использовать новый параметр icon в объекте настроек Toastify:

Toastify({
  text: "Операция завершена",
  icon: "success",
  duration: 4000,
  backgroundColor: "#2196F3"
}).showToast();

Создание собственных расширений

Для создания собственного расширения необходимо:

  1. Создать функцию, которая принимает объект конфигурации Toastify.
  2. Добавлять или изменять свойства объекта.
  3. Вызывать оригинальный метод Toastify с модифицированными параметрами.

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

function customToast(options) {
  switch(options.type) {
    case 'success':
      options.backgroundColor = '#4CAF50';
      break;
    case 'error':
      options.backgroundColor = '#F44336';
      break;
    case 'warning':
      options.backgroundColor = '#FF9800';
      break;
    default:
      options.backgroundColor = '#2196F3';
  }
  Toastify(options).showToast();
}

customToast({
  text: "Ошибка при сохранении",
  type: "error",
  duration: 5000
});

Интеграция с фреймворками

Для React и Vue разработаны адаптеры, которые позволяют использовать Toastify через компоненты:

// React пример
import Toastify from 'toastify-js';
import { useEffect } from 'react';

function Notify({ message }) {
  useEffect(() => {
    Toastify({ text: message, duration: 3000 }).showToast();
  }, [message]);
  return null;
}

Для Vue можно создать глобальный метод через app.config.globalProperties:

app.config.globalProperties.$toast = (msg) => {
  Toastify({ text: msg, duration: 3000 }).showToast();
};

Расширенные возможности стилизации

  • Поддержка CSS-анимаций через добавление классов className.
  • Возможность вставки HTML-контента в текст уведомления с помощью node вместо text.
  • Динамическая смена цвета и иконок в зависимости от состояния приложения.

Пример с HTML-контентом:

Toastify({
  node: document.createElement('div'),
  duration: 4000
}).showToast();

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

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

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

const messages = ["Первое", "Второе", "Третье"];
messages.forEach((msg, i) => {
  Toastify({
    text: msg,
    duration: 3000 + i * 1000,
    gravity: "top",
    position: "right",
    offset: { y: i * 50 } // смещение по вертикали
  }).showToast();
});

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

Автоматизация и логирование

Расширения могут добавлять функциональность автоматического логирования уведомлений в консоль или сервер:

function logToast(options) {
  console.log(`Toast: ${options.text}, type: ${options.type || 'info'}`);
  Toastify(options).showToast();
}

logToast({ text: "Событие зарегистрировано", type: "success" });

Это полезно при разработке сложных приложений, где уведомления отражают состояние бизнес-логики и требуют отслеживания.

Оглавление