useWebNotification

Category

Browser

Export Size

807 B

Last Changed

5 days ago

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

Demo

Usage

TIP

Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour.

import { useWebNotification } from '@reause/core'
import { useEffect } from 'react'

const {
  isSupported,
  notification,
  permissionGranted,
  show,
  close,
  onClick,
  onShow,
  onError,
  onClose,
} = useWebNotification({
  title: 'Hello, reause world!',
  dir: 'auto',
  lang: 'en',
  renotify: true,
  tag: 'test',
})

useEffect(() => {
  if (isSupported && permissionGranted)
    show()
}, [isSupported, permissionGranted, show])

const { onClick, onShow, onError, onClose } = useWebNotification()

onClick((event) => {
  // Do something with the notification on:click event...
})

onShow((event) => {
  // Do something with the notification on:show event...
})

onError((event) => {
  // Do something with the notification on:error event...
})

onClose((event) => {
  // Do something with the notification on:close event...
})

Type Declarations

Toggle

export interface WebNotificationOptions {
    title?: string;
    body?: string;
    dir?: 'auto' | 'ltr' | 'rtl';
    lang?: string;
    tag?: string;
    icon?: string;
    renotify?: boolean;
    requireInteraction?: boolean;
    silent?: boolean;
    vibrate?: number[];
}

export interface UseWebNotificationOptions extends ConfigurableWindow, WebNotificationOptions {
    requestPermissions?: boolean;
}

export interface UseWebNotificationReturn {
    isSupported: boolean;
    notification: Notification | null;
    ensurePermissions: () => Promise<boolean | undefined>;
    permissionGranted: boolean;
    show: (overrides?: WebNotificationOptions) => Promise<Notification | undefined>;
    close: () => void;
    onClick: (fn: (event: Event) => void) => () => void;
    onShow: (fn: (event: Event) => void) => () => void;
    onError: (fn: (event: Event) => void) => () => void;
    onClose: (fn: (event: Event) => void) => () => void;
}

export function useWebNotification(options?: UseWebNotificationOptions): UseWebNotificationReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

534c2 - refactor(shared)!: return the off function from listener registrars

v0.1.0 on

3a55e - fix(core): resolve useWebNotification audit findings (#691)