Создание собственного API

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

Через npm:

npm install toastify-js

И подключение в JavaScript-файле:

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

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

Использование CDN удобно для быстрых прототипов, npm предпочтителен для полноценного проекта с сборщиком.

Основы создания уведомлений

Базовая структура уведомления в Toastify выглядит так:

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

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

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

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

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

Toastify({
  text: "Кастомное уведомление",
  duration: 4000,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    fontSize: "16px",
    borderRadius: "8px"
  }
}).showToast();

Использование style позволяет быстро изменять визуализацию без создания отдельного CSS-класса.

Обработка событий

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

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

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

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

Группировка и повторное использование

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

function showToast(message, type = "info") {
  let bgColor;
  switch(type) {
    case "success":
      bgColor = "green"; break;
    case "error":
      bgColor = "red"; break;
    case "warning":
      bgColor = "orange"; break;
    default:
      bgColor = "blue";
  }

  Toastify({
    text: message,
    duration: 3000,
    backgroundColor: bgColor,
    close: true
  }).showToast();
}

showToast("Операция прошла успешно", "success");
showToast("Произошла ошибка", "error");

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

Toastify с асинхронными операциями

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

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    if (!response.ok) throw new Error("Ошибка загрузки");
    let data = await response.json();
    Toastify({ text: "Данные успешно загружены", backgroundColor: "green" }).showToast();
    return data;
  } catch (err) {
    Toastify({ text: err.message, backgroundColor: "red" }).showToast();
  }
}

fetchData();

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

Создание собственного API поверх Toastify

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

Пример реализации:

const Notification = (() => {
  const defaultSettings = {
    duration: 3000,
    gravity: "top",
    position: "right",
    close: true
  };

  function show(message, options = {}) {
    const settings = { ...defaultSettings, ...options, text: message };
    Toastify(settings).showToast();
  }

  function success(message, options = {}) {
    show(message, { ...options, backgroundColor: "green" });
  }

  function error(message, options = {}) {
    show(message, { ...options, backgroundColor: "red" });
  }

  function warning(message, options = {}) {
    show(message, { ...options, backgroundColor: "orange" });
  }

  return { show, success, error, warning };
})();

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

Notification.success("Файл сохранён");
Notification.error("Ошибка при загрузке данных");
Notification.warning("Внимание! Ограничение ресурсов");
Notification.show("Информационное сообщение", { duration: 5000 });

Такой подход обеспечивает:

  • Единый стиль уведомлений.
  • Быструю модификацию внешнего вида и поведения.
  • Централизованное управление параметрами.

Расширение возможностей

Можно интегрировать Toastify с другими библиотеками, например, для логирования событий или динамической генерации уведомлений на основе данных API:

async function loadUsers() {
  try {
    let response = await fetch("https://api.example.com/users");
    let users = await response.json();
    users.forEach(user => {
      Notification.show(`Пользователь: ${user.name}`, { backgroundColor: "#2196F3" });
    });
  } catch (err) {
    Notification.error("Не удалось загрузить пользователей");
  }
}

loadUsers();

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

Оглавление