NotificationsProvider
Context for showing notifications from descendants.
useNotifications exposes notifications, showNotification, and hideNotification.
Live example
Example controls
Usage
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>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | ReactNode | Descendants that can use useNotifications. | — |
top | number | Top offset of notifications in pixels. | 0 |
delay | number | Notification lifetime in milliseconds. | 5000 |
animationDuration | number | Animation duration in milliseconds. | 200 |
estimatedNotificationHeight | number | Estimated height for notification layout. | 80 |
disableTimer | boolean | Disables auto-dismiss. | false |
disableProgressBar | boolean | Hides the timer progress bar. | false |
disableTimerPauseOnHover | boolean | Timer does not pause on hover. | false |
disableTimerPauseOnContainerHover | boolean | Timer does not pause when hovering the container. | false |
disableCloseByClickInsideAnywhere | boolean | Prevents dismissing by clicking inside. | false |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.