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

Библиотека Toastify поддерживает современный подход к организации кода через модульные системы JavaScript, включая ES Modules (ESM) и CommonJS. Это позволяет интегрировать уведомления в проекты с использованием сборщиков вроде Webpack, Parcel, Vite или Rollup, обеспечивая контроль над зависимостями и минимизацию конечного кода.

Установка через npm или yarn

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

npm install toastify-js
# или
yarn add toastify-js

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

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

// CommonJS
const Toastify = require('toastify-js');
require('toastify-js/src/toastify.css');

Важно подключать CSS отдельно, иначе стили уведомлений не будут применяться.

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

После подключения модуля можно создавать уведомления через вызов конструктора Toastify() с объектом настроек:

Toastify({
  text: "Успешная операция!",
  duration: 3000,           // Продолжительность отображения
  gravity: "top",           // Расположение: "top" или "bottom"
  position: "right",        // Позиция: "left", "center", "right"
  backgroundColor: "#4CAF50",
  close: true               // Добавить кнопку закрытия
}).showToast();

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах.
  • gravity и position — управление расположением на экране.
  • backgroundColor — настройка цвета фона.
  • close — включение кнопки закрытия уведомления.

Интеграция с сборщиками и Tree Shaking

Современные сборщики поддерживают tree shaking, что позволяет исключать из сборки ненужные части библиотеки. Для этого необходимо импортировать только основной модуль:

import Toastify from 'toastify-js';

и избегать глобальных подключений через <script> в HTML, чтобы сборщик мог оптимизировать код.

Пользовательские стили через CSS или JS

Toastify допускает кастомизацию внешнего вида уведомлений:

  1. Через CSS Можно переопределять стандартные классы .toastify:
.toastify {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  border-radius: 8px;
}
  1. Через JS Настройки style позволяют применять стили напрямую:
Toastify({
  text: "Кастомное уведомление",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold"
  }
}).showToast();

Обработка событий уведомлений

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

Toastify({
  text: "Нажмите на меня",
  onClick: function() {
    console.log("Уведомление кликнуто");
  },
  duration: 5000
}).showToast();
  • onClick — срабатывает при клике на уведомление.
  • callback после скрытия может быть реализован через setTimeout на основе duration, поскольку встроенного события завершения нет.

Множественные уведомления и очередь

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

const messages = ["Первое", "Второе", "Третье"];

messages.forEach(msg => {
  Toastify({ text: msg, duration: 2000 }).showToast();
});

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

Импорт отдельных ресурсов для оптимизации

Если проект требует минимизации веса бандла, можно импортировать только JS или CSS:

// Только JS
import Toastify from 'toastify-js/dist/toastify.js';

// Только CSS
import 'toastify-js/src/toastify.css';

Такой подход особенно полезен для мобильных приложений или SPA, где важен размер финального бандла.

Использование с фреймворками

  1. React / Vue / Svelte Toastify легко интегрируется как обычный модуль:
// React пример
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';

function notify() {
  Toastify({ text: "Привет из React!" }).showToast();
}
  1. Angular Подключение через angular.json или импорт через TypeScript-модуль:
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';

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

Резюме возможностей модульной интеграции

  • Поддержка ES Modules и CommonJS.
  • Возможность tree shaking при использовании сборщиков.
  • Кастомизация через CSS и JS-стили.
  • Обработка кликов и пользовательских событий.
  • Поддержка множественных уведомлений и очередей.
  • Простое подключение к React, Vue, Svelte, Angular.

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

Оглавление