useSnackbarManager

Быстрый старт

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

const [snackbarApi, snackbarHolder] = useSnackbarManager();
 
// Показать уведомление
snackbarApi.open({
  children: "Привет, мир!",
});
 
// Не забудьте добавить holder в JSX
return (
  <>
    {/* Ваш контент */}
    {snackbarHolder}
  </>
);

Параметры

Все параметры опциональны. Хук можно вызвать без аргументов: useSnackbarManager().

Возвращаемое значение

Хук возвращает массив из двух элементов:

1. snackbarApi — объект с методами для управления снекбарами
2. snackbarHolder — React-элемент, который нужно добавить в JSX вашего компонента

API методы

open(config) — открыть снекбар

Показывает новое уведомление. Принимает те же свойства, что и компонент Snackbar (кроме open и offsetY).

Возвращает: объект с методами для управления этим снекбаром (см. OpenReturn).

const result = snackbarApi.open({
  children: "Операция выполнена успешно",
  action: "Закрыть",
  onActionClick: () => console.log("Кнопка нажата"),
});
 
// Можно сразу закрыть
result.close();

openCustom(payload) — открыть кастомный снекбар

Позволяет создать снекбар с собственной разметкой. Подробнее в разделе Пользовательские снекбары.

close(id) — закрыть снекбар

Закрывает снекбар по его идентификатору.

const result = snackbarApi.open({ children: "Уведомление" });
snackbarApi.close(result.id);

closeAll() — закрыть все снекбары

Закрывает все открытые снекбары одновременно.

snackbarApi.closeAll();

update(id, config) — обновить свойства снекбара

Изменяет свойства уже открытого снекбара. Можно изменить любое свойство, кроме id и placement.

const result = snackbarApi.open({ children: "Старый текст" });
 
// Позже обновляем содержимое
snackbarApi.update(result.id, {
  children: "Новый текст",
  action: "ОК",
});

setLimit(count) — изменить лимит снекбаров

Меняет максимальное количество одновременно открытых снекбаров.

snackbarApi.setLimit(6); // Теперь можно показать до 6 снекбаров

setQueueStrategy(behavior) — изменить стратегию очереди

Меняет поведение при переполнении очереди: "queue" или "shift".

snackbarApi.setQueueStrategy("queue"); // Новые снекбары будут ждать

setOffsetYStart(offset) и setOffsetYEnd(offset) — изменить отступы

Изменяют отступы контейнера со снекбарами от краёв страницы.

snackbarApi.setOffsetYStart(60); // Отступ сверху 60px
snackbarApi.setOffsetYEnd(20); // Отступ снизу 20px

setZIndex(zIndex) — изменить z-index

Меняет значение z-index контейнера снекбаров.

snackbarApi.setZIndex(9999);

OpenReturn

Объект, который возвращают методы open и openCustom. Содержит методы для управления конкретным снекбаром.

Пример использования onClose:

const result = snackbarApi.open({ children: "Сообщение" });
 
// Выполнить действие после закрытия
result.onClose().then(() => {
  console.log("Снекбар закрыт!");
});

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

Базовый пример

Управление конкретным снекбаром

Обновление снекбара

Настройка лимита и стратегии очереди

Пользовательские снекбары

Метод openCustom позволяет создать снекбар с собственной разметкой и логикой. Это полезно, когда нужно:

• Передать дополнительные данные в снекбар
• Использовать сложную разметку, которую нельзя описать через open
• Разделить логику вызова снекбара и его отображения

Как это работает

Вместо простого объекта конфигурации вы передаёте React-компонент, который будет рендерить содержимое снекбара. В этот компонент автоматически передаются:

• snackbarProps — все свойства для компонента Snackbar
• id — идентификатор снекбара
• close() — функция для закрытия снекбара
• update(props) — функция для обновления свойств снекбара
• ваши дополнительные свойства (если указаны)

Два способа использования

Способ 1: Передать объект с настройками (когда нужны дополнительные свойства)

snackbarApi.openCustom({
  component: MySnackbarComponent,
  additionalProps: {
    userName: "Иван",
  },
  baseProps: {
    // Свойства для Snackbar
    action: "ОК",
  },
});

Способ 2: Передать компонент напрямую (когда дополнительные свойства не нужны)

snackbarApi.openCustom(MySnackbarComponent);

Типы

CustomSnackbar.Payload<AdditionalProps> — объект с настройками:

• component — React-компонент для рендеринга
• additionalProps? — дополнительные свойства для компонента
• baseProps? — базовые свойства для Snackbar
• id? — идентификатор (генерируется автоматически, если не указан)

CustomSnackbar.Props<AdditionalProps> — свойства, которые получает ваш компонент:

• Все ваши AdditionalProps
• snackbarProps — свойства для Snackbar
• id — идентификатор снекбара
• close() — закрыть снекбар
• update(props) — обновить свойства

Пример с дополнительными свойствами

Когда нужно передать данные в снекбар (например, имя пользователя):

Пример без дополнительных свойств

Если дополнительные свойства не нужны, можно передать компонент напрямую:

Пример с использованием методов внутри компонента

Внутри кастомного компонента можно использовать методы close() и update():