Публикация расширений

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

Через 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

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

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

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

Для отображения простого тоста используется функция Toastify() с объектом конфигурации:

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

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах.
  • close — добавляет кнопку закрытия (true/false).
  • gravity — положение по вертикали ("top" или "bottom").
  • position — положение по горизонтали ("left", "center", "right").

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

Toastify позволяет полностью управлять стилем уведомления через CSS или объект style:

Toastify({
  text: "Кастомный стиль",
  duration: 4000,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#ffffff",
    fontWeight: "bold",
    borderRadius: "8px"
  }
}).showToast();

Также можно добавлять классы CSS через className:

Toastify({
  text: "Уведомление с классом",
  duration: 3000,
  className: "custom-toast"
}).showToast();

Добавление действий и ссылок

Уведомление может содержать интерактивные элементы, например ссылку:

Toastify({
  text: "Перейти на сайт",
  duration: 5000,
  destination: "https://example.com",
  newWindow: true
}).showToast();

Параметры:

  • destination — URL, на который перейдёт пользователь при клике.
  • newWindow — открытие ссылки в новом окне (true/false).

Для обработки кастомных кликов можно использовать onClick:

Toastify({
  text: "Нажми на меня",
  duration: 4000,
  onClick: () => {
    console.log("Уведомление кликнуто");
  }
}).showToast();

Массив уведомлений и очередь

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

const notifications = [
  { text: "Первое", duration: 2000 },
  { text: "Второе", duration: 2500 },
  { text: "Третье", duration: 3000 }
];

notifications.forEach(notif => Toastify(notif).showToast());

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

notifications.forEach((notif, index) => {
  setTimeout(() => Toastify(notif).showToast(), index * 1500);
});

Расширение функционала Toastify

1. Пользовательские шаблоны

Создание HTML-тегов внутри уведомления:

Toastify({
  node: (() => {
    const node = document.createElement("div");
    node.innerHTML = `<strong>Важное:</strong> ${"Текст уведомления"}`;
    return node;
  })(),
  duration: 5000
}).showToast();

2. Адаптация под разные устройства

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

const position = window.innerWidth < 600 ? "center" : "right";

Toastify({
  text: "Мобильная адаптация",
  position,
  duration: 3000
}).showToast();

3. Расширение через пользовательские плагины

Можно создавать обёртки для повторного использования настроек:

function showSuccess(message) {
  Toastify({
    text: message,
    duration: 3000,
    style: { background: "#28a745", color: "#fff" },
    close: true
  }).showToast();
}

showSuccess("Операция выполнена успешно");

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

React:

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

const handleClick = () => {
  Toastify({ text: "React уведомление", duration: 3000 }).showToast();
};

Vue:

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

export default {
  methods: {
    notify() {
      Toastify({ text: "Vue уведомление", duration: 3000 }).showToast();
    }
  }
};

Angular:

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

Toastify({
  text: "Angular уведомление",
  duration: 3000
}).showToast();

Управление жизненным циклом уведомлений

Для контроля отображения и удаления уведомлений можно сохранять ссылки на элементы:

const toast = Toastify({ text: "Жизненный цикл", duration: -1 }).showToast();

// закрыть через 5 секунд
setTimeout(() => toast.hideToast(), 5000);

duration: -1 позволяет сделать уведомление постоянным до явного закрытия.

Локализация и динамический текст

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

const messages = {
  en: "Operation completed",
  ru: "Операция выполнена"
};

Toastify({
  text: messages["ru"],
  duration: 3000
}).showToast();

Работа с глобальными настройками

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

const defaultToast = (options) => Toastify({
  duration: 3000,
  close: true,
  gravity: "top",
  position: "right",
  style: { background: "#333", color: "#fff" },
  ...options
}).showToast();

defaultToast({ text: "Глобальное уведомление" });
defaultToast({ text: "Ещё одно уведомление", style: { background: "#007bff" } });

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

Оглавление