@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
89 lines • 2.54 kB
TypeScript
/**
* Reactive notification controller
*/
export declare function useNotification(): NotificationRef;
/**
* Simple notification helper
*/
export declare function notify(title: string, options?: NotificationOptions): Promise<Notification | null>;
/**
* Check if notifications are supported and permitted
*/
export declare function canNotify(): boolean;
/**
* Request notification permission
*/
export declare function requestNotificationPermission(): Promise<NotificationPermission>;
/**
* Show notification with common patterns
*/
export declare const notifications: {
/** Success notification */
success: (message: string, options?: NotificationOptions) => unknown;
/** Error notification */
error: (message: string, options?: NotificationOptions) => unknown;
/** Warning notification */
warning: (message: string, options?: NotificationOptions) => unknown;
/** Info notification */
info: (message: string, options?: NotificationOptions) => unknown
};
export declare interface NotificationState {
permission: NotificationPermission
isSupported: boolean
}
export declare interface NotificationOptions {
body?: string
icon?: string
badge?: string
image?: string
tag?: string
requireInteraction?: boolean
renotify?: boolean
silent?: boolean
vibrate?: number | number[]
data?: unknown
autoClose?: number
dir?: 'auto' | 'ltr' | 'rtl'
lang?: string
actions?: NotificationAction[]
timestamp?: number
}
export declare interface NotificationAction {
action: string
title: string
icon?: string
}
export declare interface NotificationRef {
get: () => NotificationState
subscribe: (fn: (state: NotificationState) => void) => () => void
isSupported: () => boolean
permission: () => NotificationPermission
requestPermission: () => Promise<NotificationPermission>
show: (title: string, options?: NotificationOptions) => Notification | null
close: (tag: string) => void
}
/**
* useNotification - Web Notifications API wrapper
*
* Display native browser notifications with reactive permission state.
*
* @example
* ```ts
* const { permission, isSupported, show, requestPermission } = useNotification()
*
* // Request permission
* await requestPermission()
*
* // Show notification
* const notification = show('Hello!', {
* body: 'This is a notification',
* icon: '/icon.png',
* })
*
* // Handle click
* notification?.addEventListener('click', () => {
* window.focus()
* })
* ```
*/
export type NotificationPermission = 'default' | 'granted' | 'denied'