Кастомный контент в уведомлениях

В библиотеке Ant Design (AntD) уведомления реализуются через компонент notification. Он предоставляет возможность отображать краткие всплывающие сообщения пользователю с различными уровнями важности: success, info, warning и error.

Простейший пример использования стандартного уведомления:

import { notification, Button } from 'antd';

const openNotification = () => {
  notification.success({
    message: 'Успешно',
    description: 'Операция выполнена успешно.'
  });
};

<Button onCl ick={openNotification}>Показать уведомление</Button>

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

Создание кастомного контента

Компонент notification принимает объект конфигурации, где поле description может быть не только строкой, но и React-элементом. Это открывает возможность для внедрения любых визуальных компонентов и интерактивных элементов.

Пример уведомления с кастомным содержимым:

notification.open({
  message: 'Новый элемент',
  description: (
    <div>
      <p>Добавлен новый элемент в список.</p>
      <Button type="primary" onCl ick={() => alert('Действие выполнено')}>
        Подтвердить
      </Button>
    </div>
  ),
});

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

  • Использование JSX внутри description.
  • Возможность добавления кнопок, ссылок, иконок и других компонентов AntD.
  • События на компонентах (onClick, onChange) работают как в обычных элементах.

Управление позиционированием и стилем

AntD позволяет задавать позицию уведомлений через placement:

notification.info({
  message: 'Информация',
  description: 'Уведомление отображается справа сверху',
  placement: 'topRight'
});

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

  • topLeft
  • topRight
  • bottomLeft
  • bottomRight

Для дополнительного кастомного оформления можно использовать style:

notification.open({
  message: 'Кастомный стиль',
  description: 'Пример с пользовательскими стилями',
  style: { backgroundColor: '#f0f0f0', color: '#333' }
});

Кастомизация и интерактивность

Можно полностью контролировать действия пользователя, добавляя кнопки с обработчиками и даже элементы формы:

import { Input } from 'antd';

notification.open({
  message: 'Форма в уведомлении',
  description: (
    <div>
      <Input placeholder="Введите текст" />
      <Button type="primary" style={{ marginTop: 8 }}>Отправить</Button>
    </div>
  ),
  duration: 0, // уведомление не закроется автоматически
});

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

  • duration: 0 предотвращает автоматическое закрытие уведомления.
  • Встроенные элементы формы позволяют собирать данные без открытия модального окна.
  • Можно использовать любые компоненты AntD, включая Select, DatePicker, Switch.

Управление состоянием уведомлений

Библиотека предоставляет методы для управления открытыми уведомлениями:

  • notification.open() — открыть уведомление.
  • notification.close(key) — закрыть уведомление по ключу.
  • notification.destroy() — закрыть все уведомления.

Пример с уникальными ключами для контроля:

const key = `open${Date.now()}`;

notification.open({
  message: 'Контроль уведомления',
  description: 'Это уведомление можно закрыть программно',
  key,
});

setTimeout(() => notification.close(key), 5000);

Вставка сложных компонентов и анимации

Кастомные уведомления могут включать анимации и компоненты с динамическим состоянием:

import { Progress } from 'antd';
import { useState, useEffect } from 'react';

const ProgressNotification = () => {
  const [percent, setPercent] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setPercent(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 10;
      });
    }, 500);
  }, []);

  return (
    <Progress percent={percent} />
  );
};

notification.open({
  message: 'Загрузка',
  description: <ProgressNotification />,
  duration: 0,
});

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

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

Для улучшения восприятия информации в уведомлениях можно добавлять кастомные иконки:

import { SmileOutlined } from '@ant-design/icons';

notification.open({
  message: 'Приветствие',
  description: 'Это уведомление с иконкой',
  icon: <SmileOutlined style={{ color: '#108ee9' }} />
});
  • Поле icon позволяет использовать любые SVG-иконки или компоненты AntD Icons.
  • Цвет и размер иконки легко кастомизировать через style.

Итоговый подход к кастомным уведомлениям

  • description принимает JSX, что открывает возможность вставлять любые компоненты.
  • duration, placement и style позволяют полностью контролировать отображение уведомлений.
  • Использование key и методов close/destroy даёт контроль над временем жизни уведомлений.
  • Возможна интеграция интерактивных элементов, прогресс-баров, форм и динамических данных.
  • Кастомные иконки и стили делают уведомления визуально привлекательными и информативными.

Такой подход превращает стандартные всплывающие сообщения в мощный инструмент интерактивного взаимодействия с пользователем внутри приложения на React с использованием Ant Design.

Оглавление