Toast-уведомления

В Chakra UI Toast — это временное уведомление, которое отображается поверх интерфейса, информируя пользователя о действиях, ошибках, успехах или предупреждениях. Toast уведомления не требуют ручного закрытия пользователем и автоматически исчезают через заданный промежуток времени.

Для работы с Toast необходимо использовать хук useToast, который возвращает функцию для вызова уведомлений.

import { useToast, Button } from "@chakra-ui/react";

function Example() {
  const toast = useToast();

  return (
    <Button
      onCl ick={() =>
        toast({
          title: "Действие выполнено",
          description: "Ваши изменения были успешно сохранены.",
          status: "success",
          duration: 5000,
          isClosable: true,
        })
      }
    >
      Показать уведомление
    </Button>
  );
}
  • title — основной заголовок уведомления.
  • description — дополнительное описание.
  • status — тип уведомления: "success", "error", "warning", "info".
  • duration — время отображения в миллисекундах. Если не указано, используется значение по умолчанию (5000 мс).
  • isClosable — возможность закрытия уведомления пользователем вручную.

Позиционирование Toast

По умолчанию уведомления появляются в правом верхнем углу. Позицию можно изменить с помощью свойства position:

toast({
  title: "Информация",
  status: "info",
  position: "bottom-left",
});

Возможные значения position:

  • "top"
  • "top-right"
  • "top-left"
  • "bottom"
  • "bottom-right"
  • "bottom-left"

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

Автоматическое закрытие и управление временем жизни

Свойство duration контролирует, как долго уведомление будет отображаться. Для создания постоянного уведомления без автоматического скрытия нужно указать null:

toast({
  title: "Внимание",
  description: "Это уведомление не закроется автоматически.",
  status: "warning",
  duration: null,
  isClosable: true,
});

При необходимости программного закрытия можно использовать функцию toast.closeAll(), которая закрывает все активные уведомления:

<Button onCl ick={() => toast.closeAll()}>Закрыть все уведомления</Button>

Настройка статусов и визуальных стилей

Chakra UI предоставляет четыре стандартных статуса, каждый из которых имеет уникальный цвет и иконку:

  • success — зелёный, подтверждает успешное действие.
  • error — красный, указывает на ошибку.
  • warning — жёлтый, предупреждение о потенциальной проблеме.
  • info — синий, нейтральная информация.

Для более тонкой кастомизации можно использовать variant:

toast({
  title: "Кастомное уведомление",
  status: "info",
  variant: "subtle", // другие варианты: "solid", "left-accent", "top-accent"
});
  • subtle — лёгкий фон, подходит для ненавязчивых уведомлений.
  • solid — яркий фон, акцентирует внимание.
  • left-accent — цветная полоска слева, привлекает внимание, но оставляет контент визуально лёгким.
  • top-accent — цветная полоска сверху, визуальный акцент с компактным стилем.

Массивные уведомления и уникальные идентификаторы

Если требуется одновременно показывать несколько уведомлений, можно передавать уникальный идентификатор с помощью id. Это предотвращает дублирование:

toast({
  id: "unique-toast-1",
  title: "Уведомление",
  status: "info",
});

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

Интеграция с асинхронными операциями

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

async function saveData() {
  const toast = useToast();
  try {
    await api.saveItem(data);
    toast({
      title: "Сохранено успешно",
      status: "success",
    });
  } catch (error) {
    toast({
      title: "Ошибка сохранения",
      description: error.message,
      status: "error",
    });
  }
}

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

Анимации и кастомные компоненты

Chakra UI поддерживает анимации появления и скрытия уведомлений. Можно настраивать собственные компоненты внутри Toast с помощью свойства render:

toast({
  duration: 8000,
  render: () => (
    <Box color="white" p={3} bg="purple.500" borderRadius="md">
      Кастомный контент уведомления
    </Box>
  ),
});

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

Практические рекомендации

  • Использовать status для визуального различия уведомлений.
  • Ограничивать количество одновременно отображаемых Toast, чтобы не перегружать интерфейс.
  • Для критических ошибок использовать isClosable: true и более длинный duration.
  • Для успехов и информационных сообщений оставлять автоматическое скрытие с умеренной длительностью.
  • При интеграции с асинхронными действиями обязательно показывать обратную связь сразу после завершения операции.

Эти принципы обеспечивают согласованность пользовательского опыта и поддерживают чистый и удобный интерфейс при использовании Chakra UI Toast.

Оглавление