NotificationsProvider
Контекст для вызова уведомлений из любой вложенной части.
useNotifications даёт notifications, showNotification и hideNotification.
Живой пример
Настройки примера
Использование
import { Button, NotificationsProvider, useNotifications } from '@prosazhin/pbcomponents';
function Example() {
const { showNotification } = useNotifications();
return (
<Button onClick={() => showNotification({ headline: 'Saved', children: 'Changes saved.' })}>
Show
</Button>
);
}
<NotificationsProvider top={80}>
<Example />
</NotificationsProvider>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | ReactNode | Дочерние компоненты с доступом к useNotifications. | — |
top | number | Отступ уведомлений сверху в пикселях. | 0 |
delay | number | Время показа уведомления в миллисекундах. | 5000 |
animationDuration | number | Длительность анимации в миллисекундах. | 200 |
estimatedNotificationHeight | number | Оценка высоты для раскладки уведомлений. | 80 |
disableTimer | boolean | Отключает автоматическое закрытие. | false |
disableProgressBar | boolean | Скрывает индикатор времени. | false |
disableTimerPauseOnHover | boolean | Таймер не останавливается при наведении. | false |
disableTimerPauseOnContainerHover | boolean | Таймер не останавливается при наведении на контейнер. | false |
disableCloseByClickInsideAnywhere | boolean | Запрещает закрывать нажатием внутри. | false |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.