Что такое Toastify

Toastify — это лёгкая библиотека для создания всплывающих уведомлений (toasts) в веб-приложениях. Она позволяет быстро отображать сообщения пользователю с минимальной настройкой и без необходимости интегрировать сложные фреймворки уведомлений. Toastify ориентирована на простоту и гибкость: уведомления могут быть кастомизированы по стилю, позиции, времени отображения и поведению при взаимодействии.

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

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

  1. Через 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>
  1. Через npm:
npm install toastify-js

И в коде:

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

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

Базовое уведомление создаётся вызовом функции Toastify() с объектом конфигурации и последующим методом .showToast().

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

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах. Если указать -1, уведомление будет постоянным до закрытия пользователем.

Позиционирование уведомлений

Toastify позволяет размещать уведомления в различных частях экрана. Для этого используется параметр gravity (вертикальная позиция) и position (горизонтальная позиция):

Toastify({
    text: "Уведомление в правом верхнем углу",
    duration: 4000,
    gravity: "top", // top или bottom
    position: "right" // left, center, right
}).showToast();

Особенности позиционирования:

  • Возможность комбинировать gravity и position.
  • center по горизонтали автоматически выравнивает уведомление по центру.
  • Можно создавать несколько уведомлений, которые не перекрывают друг друга, используя разные позиции.

Кастомизация стиля

Стиль уведомлений можно менять с помощью CSS или параметра style. Пример изменения фона, цвета текста и шрифта:

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

Особенности кастомизации:

  • background поддерживает градиенты.
  • Возможны все CSS-свойства, применимые к элементу div.
  • Для глобального стиля можно переопределить CSS-классы .toastify и .toastify-content.

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

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

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

Параметры для взаимодействия:

  • destination — URL, на который будет вести клик по уведомлению.
  • close — отображает кнопку закрытия уведомления.

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

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

Автоматическое закрытие и задержка

  • duration управляет временем отображения.
  • Установка duration: -1 делает уведомление постоянным.
  • Можно комбинировать с параметром close: true, чтобы предоставить пользователю возможность закрыть уведомление вручную.

Применение в реактивных интерфейсах

Toastify легко интегрируется с любыми фронтенд-фреймворками (React, Vue, Angular). В React можно создавать отдельный компонент для уведомлений:

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

export const notify = (message) => {
    Toastify({
        text: message,
        duration: 3000,
        gravity: "top",
        position: "right"
    }).showToast();
};

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

<button onCl ick={() => notify("Привет, React!")}>Показать уведомление</button>

Дополнительные возможности

  • HTML-содержимое: можно использовать параметр text с HTML-тегами (через настройку escape: false).
  • Разные темы: светлая и тёмная тема задаются кастомными стилями.
  • Очередь уведомлений: Toastify автоматически управляет несколькими уведомлениями, не позволяя им перекрываться.

Итоговые ключевые моменты

  • Простое подключение через CDN или npm.
  • Лёгкая настройка текста, времени, позиции и стиля.
  • Возможность добавления ссылок, кнопок и обработчиков клика.
  • Полная совместимость с современными фронтенд-фреймворками.
  • Высокая гибкость кастомизации и управления очередью уведомлений.

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

Оглавление