useWebNotification

The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.

useWebNotification wraps the Notifications API to display native desktop/mobile notifications. It returns an object with isSupported, a show function (accepting a title and NotificationOptions), a close function, an ensurePermissions function, and a permissionGranted ref. Pass true to auto-request notification permission on mount.

When to Use

• Alerting users about new messages, updates, or events even when the browser tab is not focused
• Sending reminders for scheduled tasks, timers, or calendar events
• Notifying users about completed background operations (uploads, downloads, builds)

Notes

• SSR-safe: Returns isSupported: false and no-op functions during server-side rendering. No Notification constructor or permission requests occur on the server.
• Permissions: Notifications require explicit user permission. Use ensurePermissions() or pass requestPermissions: true to prompt the user. The permissionGranted ref tracks the current permission state.
• Related hooks: Use alongside usePermission with "notifications" to proactively check notification permission status without triggering a prompt.

Usage

function Demo() {
  const { isSupported, show, close }
    = useWebNotification(true);
  return (
    <div>
      <p>Supported: {JSON.stringify(isSupported)}</p>
      {isSupported
        ? (
          <div>
            <button
              onClick={() => {
                show("Hello, world from ReactUse!");
              }}
            >
              Show Notification
            </button>
            <button onClick={close}>Close</button>
          </div>
          )
        : (
          <div>The Notification Web API is not supported in your browser.</div>
          )}
    </div>
  );
};

API

useWebNotification

Returns

UseWebNotificationReturn

Arguments

UseWebNotificationReturn

UseWebNotificationShow

Returns

Notification | undefined

Arguments