useWebNotification

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

warning

Attention: For users on the Mac system, it is necessary for them to have enabled notifications for Chrome in their system settings. Without enabling notifications for Chrome in the system, even if the front-end page requests permission, notifications will not be displayed.

Usage

Live Editor

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>
  );
};

Result

Loading...

API

useWebNotification

Returns

UseWebNotificationReturn

Arguments

Argument	Description	Type	DefaultValue
requestPermissions	auto request permission	boolean | undefined	-

UseWebNotificationReturn

Property	Description	Type	DefaultValue
isSupported	whether browser support	boolean (Required)	-
show	show function	UseWebNotificationShow (Required)	-
close	close function	() => void (Required)	-
ensurePermissions	request permissions function	() => Promise<boolean | undefined> (Required)	-
permissionGranted	permission status	React.MutableRefObject<boolean> (Required)	-

UseWebNotificationShow

Returns

Notification | undefined

Arguments

Argument	Description	Type	DefaultValue
title	notification title	string (Required)	-
options	options passed to NotificationOptions	NotificationOptions | undefined	-