Подготовка к продакшену

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

Через CDN:

Через npm:

npm install toastify-js

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

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

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

Базовое уведомление создаётся с помощью функции Toastify():

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

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

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

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

Toastify поддерживает как встроенные стили, так и кастомизацию через CSS. Например:

Toastify({
  text: "Кастомное уведомление",
  duration: 5000,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold",
  }
}).showToast();

Можно использовать классы:

.custom-toast {
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
}
Toastify({
  text: "Стили через класс",
  className: "custom-toast"
}).showToast();

События и интерактивность

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

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

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

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

Подготовка к продакшену

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

  1. Минификация и бандлинг При использовании npm важно подключать минифицированные версии через бандлеры (Webpack, Vite, Parcel):

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

    При сборке бандлер автоматически минифицирует JS и CSS, уменьшая размер файлов.

  2. Асинхронная загрузка Для уменьшения влияния на загрузку страницы можно подключать Toastify асинхронно:

    import('toastify-js').then(ToastifyModule => {
  ToastifyModule.default({ text: "Асинхронное уведомление" }).showToast();
});

  3. Управление дублированием уведомлений В продакшен-среде важно предотвращать создание множества одинаковых уведомлений. Можно использовать проверку перед показом:

    let toastVisible = false;

function showUniqueToast(message) {
  if (!toastVisible) {
    toastVisible = true;
    Toastify({
      text: message,
      duration: 3000,
      onClose: () => { toastVisible = false; }
    }).showToast();
  }
}

  4. Оптимизация стилей Использование кастомных классов и встроенного CSS позволяет минимизировать повторяющиеся стили и уменьшить нагрузку на рендеринг.

  5. Логирование и аналитика В продакшене может быть полезно логировать показ уведомлений для анализа поведения пользователей:

    Toastify({
  text: "Уведомление с логированием",
  duration: 3000,
  onClick: () => logEvent('toast_clicked'),
  onClose: () => logEvent('toast_closed')
}).showToast();

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

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

React пример:

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

function notify(message) {
  Toastify({ text: message, duration: 3000 }).showToast();
}

export default function App() {
  return ;
}

Vue пример:

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

export default {
  methods: {
    showToast(msg) {
      Toastify({ text: msg, duration: 3000 }).showToast();
    }
  }
}

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

Оглавление