Toast
Обновлённая версия компонента Toast с поддержкой управления отдельными тостами, настакивания, кастомного рендера и анимации.
Использование
Вставьте ToastContainer один раз в дерево приложения, затем вызывайте showToast там, где нужно показать уведомление.
На этой странице все интерактивные примеры используют контейнер из первого примера.
По умолчанию повторный вызов showToast заменяет текущий тост. Чтобы показывать несколько уведомлений одновременно, передайте stacking: true. Тосты складываются отдельно для каждой позиции, например top-center и bottom-right. Расстояние между тостами настраивается в пикселях через gap у ToastContainer; по умолчанию оно равно 8.
showToast возвращает ID тоста. Его можно использовать, чтобы закрыть именно это уведомление с помощью hideToast(id). Если передать собственный id, повторный вызов с тем же ID обновит этот тост. При stacking: true и без заданного ID он генерируется библиотекой.
const id = showToast('Загрузка завершена', { stacking: true });
hideToast(id);
Кастомный рендер
Для отдельного тоста можно передать renderToast. Callback получает опции этого тоста, включая итоговый ID. Текст можно использовать из замыкания:
Анимация
Задайте CSS keyframes в стилях приложения. Общую анимацию можно передать в ToastContainer через animation, а анимацию отдельного тоста — через showToast.
API
Свойства ToastContainer
Свойства showToast
| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
stacking | boolean | false | Разрешает показывать несколько тостов одновременно. |
id | string | Автоматический при stacking: true | ID тоста. Возвращается из showToast; используется в hideToast. |
position | ToastPosition | bottom-center | Позиция тоста. Для каждой позиции создаётся отдельная стопка. |
duration | number | Infinity | Время отображения в миллисекундах. |
animation | { enter?: CSSProperties['animation']; exit?: CSSProperties['animation'] } | Анимация react-hot-toast | CSS-анимации появления и скрытия. Настройка в опциях showToast переопределяет значение ToastContainer. |
renderToast | (options?: Omit<ShowToastPlasmaOptions, 'renderToast'>) => ReactNode | — | Функция для кастомного рендера тоста. |
hasClose | boolean | true | Показывает кнопку закрытия стандартного тоста. |
contentLeft | ReactNode | — | Контент слева от текста стандартного тоста. |
width | CSSProperties['width'] | auto | Ширина стандартного тоста. |
textColor | CSSProperties['color'] | Из view | Цвет текста стандартного тоста. |
view, size, pilled | string, string, boolean | Из конфига темы | Вариант, размер и скруглённая форма стандартного тоста. |