Поддержка разных языков

Библиотека Toastify позволяет создавать настраиваемые всплывающие уведомления в веб-приложениях. Для приложений с международной аудиторией критически важно обеспечить многоязычность сообщений, чтобы пользователь видел уведомления на понятном ему языке. Toastify напрямую не содержит встроенного механизма локализации, но гибкость библиотеки позволяет интегрировать её с любыми решениями для интернационализации (i18n).

Интеграция с системами локализации

Для реализации поддержки разных языков обычно используют объекты с ключами для разных сообщений. Например:

const messages = {
    en: {
        success: "Operation completed successfully",
        error: "An error occurred"
    },
    ru: {
        success: "Операция выполнена успешно",
        error: "Произошла ошибка"
    },
    es: {
        success: "Operación completada con éxito",
        error: "Ocurrió un error"
    }
};

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

const userLang = navigator.language.split('-')[0]; // "ru", "en", "es"

Далее, при создании уведомления, используется соответствующий текст:

Toastify({
    text: messages[userLang].success,
    duration: 3000,
    gravity: "top",
    position: "right",
    style: {
        background: "green",
    }
}).showToast();

Динамическая смена языка

Для веб-приложений с возможностью смены языка на лету важно, чтобы уведомления автоматически отображались на выбранном языке. Это достигается через использование функций, возвращающих строку, а не прямых текстов:

function getMessage(key) {
    return messages[userLang][key] || key;
}

function showSuccessToast() {
    Toastify({
        text: getMessage('success'),
        duration: 3000,
        gravity: "top",
        position: "right",
        style: {
            background: "green",
        }
    }).showToast();
}

function showErrorToast() {
    Toastify({
        text: getMessage('error'),
        duration: 3000,
        gravity: "top",
        position: "right",
        style: {
            background: "red",
        }
    }).showToast();
}

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

Поддержка HTML и форматирования текста

Toastify позволяет использовать HTML внутри текста, что удобно для локализации, где требуется дополнительное форматирование:

Toastify({
    node: (() => {
        const span = document.createElement("span");
        span.innerHTML = `<strong>${getMessage('success')}</strong>`;
        return span;
    })(),
    duration: 3000,
    gravity: "top",
    position: "right",
    style: {
        background: "#4CAF50",
    }
}).showToast();

Использование node вместо text позволяет безопасно вставлять форматированный текст, включая переводимые строки с тегами <strong>, <em>, <br> и др.

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

Для более сложных сценариев, когда сообщения включают динамические значения (например, имя пользователя или количество объектов), удобно применять шаблоны:

const messages = {
    en: {
        welcome: "Welcome, {name}!",
        items: "You have {count} items in your cart"
    },
    ru: {
        welcome: "Добро пожаловать, {name}!",
        items: "У вас {count} товаров в корзине"
    }
};

function formatMessage(template, params) {
    return template.replace(/\{(\w+)\}/g, (_, key) => params[key] || '');
}

Toastify({
    text: formatMessage(messages[userLang].welcome, { name: "Иван" }),
    duration: 3000,
    gravity: "top",
    position: "right",
    style: { background: "#2196F3" }
}).showToast();

Этот подход совместим с любыми библиотеками i18n, например i18next или vue-i18n, и позволяет интегрировать Toastify в уже существующую систему локализации без дублирования текстов.

Универсальная функция для уведомлений

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

function showToast(type, key, params = {}) {
    const colors = {
        success: "#4CAF50",
        error: "#F44336",
        info: "#2196F3",
        warning: "#FF9800"
    };

    const message = formatMessage(messages[userLang][key], params);

    Toastify({
        text: message,
        duration: 3000,
        gravity: "top",
        position: "right",
        style: { background: colors[type] || "#333" }
    }).showToast();
}

// Использование
showToast('success', 'welcome', { name: 'Мария' });
showToast('error', 'items', { count: 5 });

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

Ключевые моменты

  • Тексты уведомлений хранятся отдельно от вызовов Toastify.
  • Выбор языка определяется динамически или через глобальные настройки.
  • Для HTML-разметки используйте node вместо text.
  • Поддержка шаблонов позволяет вставлять динамические значения в сообщения.
  • Обёртка над Toastify обеспечивает единообразие и лёгкую масштабируемость многоязычной системы уведомлений.
Оглавление