useToast

useToast — это хук из библиотеки Chakra UI, предназначенный для создания уведомлений (toasts) в интерфейсе приложения на React. Уведомления помогают информировать пользователя о событиях, ошибках или успехах операций, не нарушая поток работы.

Хук возвращает функцию toast, которую можно вызывать с объектом конфигурации, определяющим поведение уведомления.

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>
  );
}

Основные параметры

При вызове функции toast можно передавать несколько ключевых свойств:

  • title — заголовок уведомления, краткая суть события.
  • description — дополнительная информация.
  • status — визуальный индикатор типа уведомления. Возможные значения: success, error, warning, info.
  • duration — время отображения уведомления в миллисекундах. По умолчанию 5000.
  • isClosable — булево значение, определяющее наличие кнопки закрытия.
  • position — положение уведомления на экране. Возможные значения: top, top-left, top-right, bottom, bottom-left, bottom-right, top-start, top-end, bottom-start, bottom-end.

Примеры использования различных статусов

toast({
  title: "Ошибка запроса",
  description: "Не удалось загрузить данные.",
  status: "error",
  duration: 4000,
  isClosable: true,
});
toast({
  title: "Внимание",
  description: "Срок действия сессии истекает.",
  status: "warning",
});
toast({
  title: "Информация",
  description: "Обновление доступно.",
  status: "info",
});

Настройка позиции и длительности

useToast позволяет гибко настраивать размещение уведомлений и время их отображения.

toast({
  title: "Сохранено",
  position: "bottom-right",
  duration: 3000,
});
  • position определяет угол экрана, где появляется уведомление.
  • duration контролирует, как долго уведомление будет видимо. Если указано null, toast останется до закрытия вручную.

Программное закрытие уведомлений

useToast поддерживает возврат идентификатора уведомления, чтобы закрывать его программно:

const id = toast({
  title: "Обновление",
  description: "Процесс выполняется",
  status: "info",
  isClosable: true,
});

setTimeout(() => {
  toast.close(id);
}, 3000);

Методы toast.closeAll() позволяют закрыть все активные уведомления сразу.

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

Можно передавать кастомный React-компонент через render для полной кастомизации:

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

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

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

По умолчанию несколько вызовов toast создают отдельные уведомления, накладывающиеся друг на друга. Можно управлять количеством одновременно отображаемых уведомлений с помощью пропса limit в ChakraProvider или фильтровать повторяющиеся уведомления, используя id:

toast({
  id: "unique-toast",
  title: "Уникальное уведомление",
  description: "Не будет дублироваться",
});

Если toast с этим id уже активен, новый вызов обновит существующий.

Адаптация под разные темы

useToast автоматически наследует тему Chakra UI. Цвета статусов, шрифты и отступы соответствуют текущей теме приложения. Для более тонкой настройки можно использовать кастомные значения цвета:

toast({
  title: "Кастомный цвет",
  status: "success",
  variant: "subtle",
  duration: 4000,
});
  • variant может принимать значения solid, subtle, left-accent, top-accent и изменяет внешний вид toast.

Итог

useToast предоставляет мощный и гибкий инструмент для создания уведомлений в приложениях на React с Chakra UI. Управление параметрами status, position, duration, а также возможность кастомизации через render позволяет создавать как стандартные, так и уникальные уведомления, полностью интегрированные с интерфейсом и темой приложения.

Оглавление