Передача данных через callback

В библиотеке Toastify основным инструментом для отображения уведомлений является функция Toastify(), которая создаёт и настраивает тосты. Передача данных через callback используется для того, чтобы динамически изменять поведение тоста в момент его отображения или при взаимодействии с пользователем, например при клике.

Toastify({
    text: "Пример уведомления",
    duration: 3000,
    onClick: function() {
        console.log("Тост был нажат");
    }
}).showToast();

В данном примере функция onClick выступает как callback, и она вызывается при клике на уведомление. Она может использовать внешние данные или передавать значения из контекста, что позволяет реализовать динамическое поведение.

Передача параметров в callback

Прямого способа передать параметры в callback через объект конфигурации Toastify нет, но можно использовать замыкания или стрелочные функции для передачи данных:

const userName = "Иван";

Toastify({
    text: "Привет, Иван!",
    duration: 3000,
    onClick: () => handleClick(userName)
}).showToast();

function handleClick(name) {
    console.log(`Пользователь ${name} нажал на тост`);
}

Здесь стрелочная функция сохраняет значение userName из внешнего контекста. Это позволяет callback использовать любые переменные из окружающей области видимости.

Динамическая генерация текста через callback

Иногда требуется формировать текст уведомления во время его вызова. Для этого можно использовать функцию для генерации строки:

function generateMessage(userId) {
    return `Пользователь с ID ${userId} получил уведомление`;
}

const userId = 123;

Toastify({
    text: generateMessage(userId),
    duration: 4000
}).showToast();

Если нужно, чтобы callback выполнялся до отображения уведомления, можно обернуть вызов Toastify в функцию:

function showToastForUser(user) {
    Toastify({
        text: `Привет, ${user.name}`,
        duration: 3000,
        onClick: () => console.log(`Тост для ${user.name} был нажат`)
    }).showToast();
}

showToastForUser({ name: "Мария" });

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

Обработка событий с данными

Toastify поддерживает несколько событий: onClick и callback при завершении анимации. Внутри этих callback можно передавать данные о пользователе, состоянии приложения или другие динамические значения.

const notifications = [
    { id: 1, message: "Сообщение 1" },
    { id: 2, message: "Сообщение 2" }
];

notifications.forEach(notification => {
    Toastify({
        text: notification.message,
        duration: 3000,
        onClick: () => handleNotificationClick(notification.id)
    }).showToast();
});

function handleNotificationClick(id) {
    console.log(`Кликнут тост с ID: ${id}`);
}

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

Передача данных через цепочку callback

Можно создавать цепочку callback для последовательной обработки данных:

function logAndAlert(message) {
    console.log(message);
    alert(message);
}

Toastify({
    text: "Нажмите на тост",
    duration: 5000,
    onClick: () => logAndAlert("Тост был нажат")
}).showToast();

Если требуется более сложная логика, callback можно делегировать внешним функциям, которые принимают аргументы и возвращают функции:

function createClickHandler(user) {
    return () => {
        console.log(`Тост для пользователя ${user.name}`);
    }
}

const user = { name: "Алексей" };

Toastify({
    text: "Привет, Алексей!",
    duration: 3000,
    onClick: createClickHandler(user)
}).showToast();

Такой подход особенно полезен при работе с массивами объектов, динамическими данными или асинхронными источниками.

Передача данных через callback

Передача параметров в callback

Динамическая генерация текста через callback

Обработка событий с данными

Передача данных через цепочку callback

Рекомендации по работе с callback