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

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

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

import { useToast, Button } fr om "@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 – время отображения в миллисекундах. Значение null делает уведомление постоянным до закрытия пользователем.
  • isClosable – добавляет кнопку закрытия уведомления.
  • position – позиция уведомления на экране: "top", "top-right", "top-left", "bottom", "bottom-right", "bottom-left", "center".
toast({
  title: "Ошибка сохранения",
  status: "error",
  duration: 3000,
  position: "top-right",
});

Разновидности и стили Toast

Chakra UI позволяет кастомизировать Toast с помощью различных параметров и компонентных свойств.

  • Статусы уведомлений влияют на цветовую гамму иконки и фона.
  • Позиция позволяет размещать уведомление в любом углу экрана.
  • Закрытие пользователем задается параметром isClosable.
  • Неограниченное время отображения можно задать через duration: null.
toast({
  title: "Важное уведомление",
  description: "Эта информация требует внимания.",
  status: "warning",
  duration: null,
  isClosable: true,
  position: "top",
});

Кастомизация через render

Для полного контроля над внешним видом Toast используется параметр render, который позволяет передать произвольный JSX.

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

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

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

Chakra UI автоматически управляет стеком уведомлений. При одновременном вызове нескольких toast() уведомления располагаются одно под другим в выбранной позиции.

Для ограничения количества одновременно отображаемых уведомлений можно использовать свойство limit при инициализации ChakraProvider.

import { ChakraProvider } from "@chakra-ui/react";

<ChakraProvider toastOptions={{ lim it: 3 }}>
  <App />
</ChakraProvider>

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

Функция toast возвращает id уведомления, который позволяет закрывать уведомление программно с помощью метода close.

const id = toast({
  title: "Временное уведомление",
  duration: 5000,
});

toast.close(id);

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

Анимации и визуальные эффекты

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

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Toast: {
      baseStyle: {
        transform: "translateY(0)",
        transition: "all 0.4s ease",
      },
    },
  },
});

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

  1. Информирование о результатах действий – сохранение формы, загрузка файлов, успешное выполнение запроса.
  2. Предупреждения и ошибки – уведомления об ошибках валидации, недоступности сервиса.
  3. Интерактивные уведомления – кнопки действий внутри Toast через кастомный render.
toast({
  render: () => (
    <Box p={3} bg="green.400" color="white" borderRadius="md">
      Данные обновлены. <Button size="sm">Отменить</Button>
    </Box>
  ),
});

Интеграция с формами и API

Часто Toast используется для уведомления пользователя о результатах асинхронных операций:

async function handleSubmit(data) {
  try {
    await api.saveData(data);
    toast({ title: "Данные сохранены", status: "success" });
  } catch (error) {
    toast({ title: "Ошибка", description: error.message, status: "error" });
  }
}

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

Советы по использованию

  • Использовать короткие и лаконичные сообщения.
  • Не перегружать пользователя большим количеством уведомлений одновременно.
  • Комбинировать статус и цветовую индикацию для быстрого восприятия.
  • Использовать кастомный render только для сложных уведомлений, иначе достаточно стандартных параметров.

Эффективное использование Toast в Chakra UI повышает информативность интерфейса, делая уведомления понятными, ненавязчивыми и визуально приятными.

Оглавление