useLocalNotifications

Provides a direct interface to trigger browser system notifications within a component.

Important

Unlike the external version, this hook manages notification state locally within the component. It still requires HTTPS and explicit user permission to show system-level alerts.

Caution

Most mobile browsers ignore the silent and requireInteraction options due to OS-level power management and notification center constraints.

Installation

bash

Description

The useLocalNotifications simplifies the native Browser Notification API by managing the permission state internally and providing a clean functional interface to trigger alerts without managing global stores.

Return values

NameTypeDescription
isSupportedbooleanWhether the browser environment supports the Notification API.
notify(options: UseNotificationOptions) => voidFunction to display a local notification.
permissionNotificationPermissionReactive state of the current notification permission.
requestPermission() => Promise<NotificationPermission>Method to prompt the user for notification access.

Demo

This component is loading.

Source code

tsx