/reactuse

useNotification

Keeps browser notification permission and the latest notification instance available for UI flows that ask permission before showing messages.

Usage

import { useNotification } from "@siberiacancode/reactuse";

const notification = useNotification();

Example

import { useNotification } from "@siberiacancode/reactuse";

export const NotifyButton = () => {
  const notification = useNotification();

  return (
    <button
      disabled={!notification.supported}
      onClick={async () => {
        if (await notification.trigger()) {
          notification.show({ title: "Build finished" });
        }
      }}
    >
      Notify me
    </button>
  );
};

title:

notification.show({ title: "Build finished" });

NotificationOptions:

notification.show({ title: "New message", body: "Open the inbox" });

onClick:

notification.show({ title: "New message", onClick: () => router.push("/inbox") });

onClose:

notification.show({ title: "Saved", onClose: () => console.log("closed") });

onError:

notification.show({ title: "Sync failed", onError: (event) => console.error(event) });

onShow:

notification.show({ title: "Ready", onShow: () => console.log("shown") });

trigger():

const allowed = await notification.trigger();
if (allowed) notification.show({ title: "Ready" });

Notes

• Hook uses the Notification API.

Type Declarations

export interface UseNotificationParams extends NotificationOptions {
  title?: string;
  onClick?: (event: Event) => void;
  onClose?: (event: Event) => void;
  onError?: (event: Event) => void;
  onShow?: (event: Event) => void;
}
export interface UseNotificationReturn {
  notification: Notification | undefined;
  supported: boolean;
  close: () => void;
  show: (params?: UseNotificationParams) => Notification | undefined;
  trigger: () => Promise<boolean>;
}
export declare const useNotification: () => UseNotificationReturn;