Подключение через CDN

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

Подключение CSS

Чтобы корректно отображались уведомления, необходимо подключить стили Toastify. Используется тег <link> в <head> документа:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  • rel=“stylesheet” — указывает браузеру, что это таблица стилей.
  • href — путь к минифицированной версии CSS через CDN. Использование минифицированной версии ускоряет загрузку страницы.

Подключение JavaScript

После подключения стилей подключается основной скрипт библиотеки с помощью тега <script>:

<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  • Скрипт подключается в конце <body> для того, чтобы HTML-элементы успели загрузиться до инициализации уведомлений.
  • Подключение через CDN гарантирует автоматическое получение актуальной версии библиотеки.

Инициализация уведомления

После подключения CSS и JS можно сразу создавать уведомления. Простейший пример:

<script>
  Toastify({
    text: "Привет, это уведомление Toastify!",
    duration: 3000
  }).showToast();
</script>
  • text — текст уведомления.
  • duration — время отображения уведомления в миллисекундах.

Основные параметры конфигурации

Toastify предоставляет широкий набор опций для настройки:

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

Пример кастомизации позиции и цвета

<script>
  Toastify({
    text: "Верхний правый угол с зелёным фоном",
    duration: 5000,
    gravity: "top",
    position: "right",
    backgroundColor: "#4CAF50"
  }).showToast();
</script>

Загрузка через различные CDN

Для большей гибкости библиотека доступна через несколько популярных CDN:

  • jsDelivr:

    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

  • UNPKG:

    <script src="https://unpkg.com/toastify-js"></script>
<link rel="stylesheet" href="https://unpkg.com/toastify-js/src/toastify.min.css">

Выбор CDN зависит от предпочтений и географического расположения пользователей для оптимальной скорости загрузки.

Асинхронная загрузка

Для ускорения загрузки страницы скрипт Toastify можно подключать с атрибутом defer:

<script src="https://cdn.jsdelivr.net/npm/toastify-js" defer></script>

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

Вывод

Подключение Toastify через CDN позволяет интегрировать уведомления максимально быстро, без установки дополнительных пакетов. Использование минифицированной версии CSS и JS обеспечивает быструю загрузку и минимальное влияние на производительность страницы. Все ключевые параметры конфигурации доступны сразу после подключения, что делает CDN-версию удобной для тестирования и прототипирования.

Оглавление