Message и валидация

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

Основная структура Message

Компонент Message включает несколько ключевых элементов:

  • Message.Root — корневой контейнер сообщения. Отвечает за состояние видимости и управление жизненным циклом сообщения.
  • Message.Title — заголовок уведомления. Используется для краткого обозначения сути сообщения.
  • Message.Description — подробное описание, позволяющее дать пользователю больше информации о событии или ошибке.
  • Message.Close — кнопка закрытия сообщения. Может быть стилизована или заменена кастомной кнопкой.

Пример базового JSX-кода компонента:


  Ошибка загрузки данных
  Не удалось получить информацию с сервера. Попробуйте позже.
  Закрыть

Ключевой момент: Message.Root контролирует состояние отображения через пропсы open и onOpenChange, что позволяет интегрировать компонент с внешними системами управления состоянием.

Управление состоянием сообщений

Radix UI не навязывает конкретную систему управления состоянием. Возможны два подхода:

  1. Контролируемый компонент: состояние open передается извне, а onOpenChange сообщает о действиях пользователя.
  2. Неконтролируемый компонент: компонент самостоятельно управляет видимостью, предоставляя минимальные хуки для отслеживания событий.

Пример контролируемого подхода:

const [open, setOpen] = useState(false);


  Успешно сохранено
  Данные пользователя обновлены.
  Закрыть

Стилизация и кастомизация

Radix UI использует подход unstyled, что означает полную свободу в применении CSS или библиотек типа Tailwind.

Основные методы кастомизации:

  • Стилизация через класс className для каждого элемента (Root, Title, Description, Close).
  • Анимации появления и скрытия через CSS-транзишны или библиотеки анимации, например, Framer Motion.
  • Иконки и визуальные индикаторы можно добавлять внутри Message.Title или Message.Description.

Пример с Tailwind:


  Ошибка
  
    Произошла ошибка при сохранении формы.
  
  ×

Интеграция с формами и валидацией

Message идеально подходит для отображения ошибок в формах. Для этого используется комбинация с библиотеками валидации, например, React Hook Form или Formik.

Пример интеграции с React Hook Form:

import { useForm } from "react-hook-form";

const Form = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSub mit = data => console.log(data);

  return (
    

      
      {errors.email && (
        
          Ошибка
          {errors.email.message}
          Закрыть
        
      )}
      
    

  );
};

Особенности:

  • Ошибки формы отображаются динамически, сразу после попытки сабмита.
  • Можно комбинировать с различными типами сообщений: предупреждение, успех, информационное уведомление.
  • Message обеспечивает удобное закрытие уведомления пользователем и может автоматически скрываться через таймер.

Продвинутая работа с жизненным циклом сообщений

Radix UI предоставляет возможность работать с анимацией появления и исчезновения:

  • Пропсы onOpenChange и open позволяют запускать действия при открытии или закрытии.
  • Можно использовать useEffect для автоматического скрытия сообщений через заданное время.

Пример автоматического закрытия:


  Успех
  Данные сохранены.
  Закрыть


useEffect(() => {
  if (open) {
    const timer = setTimeout(() => setOpen(false), 5000);
    return () => clearTimeout(timer);
  }
}, [open]);

Практические советы по использованию Message

  • Использовать одну точку контроля состояния для всех сообщений в приложении. Это упрощает управление очередью уведомлений.
  • Встраивать иконки статуса (ошибка, успех, предупреждение) для улучшения UX.
  • Предусматривать доступность: добавлять атрибут role="alert" и использовать aria-live="assertive" для сообщений об ошибках.
  • Для форм с множеством полей создавать Message для каждой ошибки, либо агрегировать ошибки в одно уведомление, чтобы не перегружать интерфейс.
Оглавление