Description of icon
Flex UI
API Reference

NotificationManager

NotificationsManager provides a client-side API to manage notifications in Flex UI. For more go to https://www.twilio.com/docs/flex/developer/ui/notifications

registerNotification(notification) => void#

Register notification.

Parameters:

  • notification: NotificationManager.Notification

    The notification to be registered.

    • id: string - The id for the notification.
    • content?: React.ReactText | React.ReactElement.<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
    • type?: NotificationManager.NotificationType - The type of the notification.
    • backgroundColor?: string - Define the notification background color.
    • icon?: string - An optional icon to be rendered inside the notification message.
    • timeout?: number - It will dismiss the notification after a certain time.
    • recurrenceTimeout?: number - If set, it will re-show the notification a certain time after it is dismissed.
    • closeButton?: boolean - Show a close button.
    • onClick?: (event) => void - Function called when notification message is clicked.
      • event: any - Click event.
      • void
    • context?: object - Optional context for the notification.
    • isApplicable?: (notificationInstance) => boolean - Callback determining whether particular notification instance should be shown.
      • notificationInstance: NotificationManager.Notification - Instance of notification to be shown.
        • id: string - The id for the notification.
        • content?: React.ReactText | React.ReactElement.<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
        • type?: NotificationManager.NotificationType - The type of the notification.
        • backgroundColor?: string - Define the notification background color.
        • icon?: string - An optional icon to be rendered inside the notification message.
        • timeout?: number - It will dismiss the notification after a certain time.
        • recurrenceTimeout?: number - If set, it will re-show the notification a certain time after it is dismissed.
        • closeButton?: boolean - Show a close button.
        • onClick?: (event) => void - Function called when notification message is clicked.
        • context?: object - Optional context for the notification.
        • isApplicable?: (notificationInstance) => boolean - Callback determining whether particular notification instance should be shown.
        • options?: NotificationManager.NotificationOptions - Options for the notification handlers.
          • browser: BrowserNotificationOptions - Browser notification options.
            • title?: string - Notification heading
            • body?: string - Notification content
            • onClick?: function - onclick event handler function
            • onClose?: function - onClose event handler function
            • onShow?: function - onShow event handler function
            • onError?: function - onError event handler function
            • options?: Object - The Notification options object from the JS Notifications API
          • target?: string - Name of target component.
        • actions?: Array.<React.ReactElement> - Array of notification actions.
      • boolean - Determines whether particular instance should be shown.
    • options?: NotificationManager.NotificationOptions - Options for the notification handlers.
      • browser: BrowserNotificationOptions - Browser notification options.
        • title?: string - Notification heading
        • body?: string - Notification content
        • onClick?: function - onclick event handler function
        • onClose?: function - onClose event handler function
        • onShow?: function - onShow event handler function
        • onError?: function - onError event handler function
        • options?: Object - The Notification options object from the JS Notifications API
      • target?: string - Name of target component.
    • actions?: Array.<React.ReactElement> - Array of notification actions.

Returns:

  • void

Example:

Notification.registerNotification({
id: "newNotification",
closeButton: true,
content: "New Notification handler",
timeout: 0,
type: NotificationType.warning,
actions: [
<NotificationBar.Action label="Hello" onClick={(event, notification) => {}} icon="Bell" />, // using the action component.
<button type="button" onClick={(event, notification) => {}}>Hello world</button> // using custom action button
]
});

showNotification(id, context?) => NotificationManager.Notification#

Show an instance of registered notification.

Parameters:

  • id: string

    The id of the notification to be shown.

  • context?: Object

    A context to be rendered in the notification.

Returns:

  • NotificationManager.Notification | null

    Notification instance, can be used to dismiss later. null is returned if action was not shown.

    • id: string - The id for the notification.
    • content?: React.ReactText | React.ReactElement.<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
    • type?: NotificationManager.NotificationType - The type of the notification.
    • backgroundColor?: string - Define the notification background color.
    • icon?: string - An optional icon to be rendered inside the notification message.
    • timeout?: number - It will dismiss the notification after a certain time.
    • recurrenceTimeout?: number - If set, it will re-show the notification a certain time after it is dismissed.
    • closeButton?: boolean - Show a close button.
    • onClick?: (event) => void - Function called when notification message is clicked.
    • context?: object - Optional context for the notification.
    • isApplicable?: (notificationInstance) => boolean - Callback determining whether particular notification instance should be shown.
    • options?: NotificationManager.NotificationOptions - Options for the notification handlers.
      • browser: BrowserNotificationOptions - Browser notification options.
        • title?: string - Notification heading
        • body?: string - Notification content
        • onClick?: function - onclick event handler function
        • onClose?: function - onClose event handler function
        • onShow?: function - onShow event handler function
        • onError?: function - onError event handler function
        • options?: Object - The Notification options object from the JS Notifications API
      • target?: string - Name of target component.
    • actions?: Array.<React.ReactElement> - Array of notification actions.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledNoAnswer);

dismissNotification(notification) => void#

Dismiss notifications.

Parameters:

  • notification: NotificationManager.Notification

    The notification to be dismissed.

    • id: string - The id for the notification.
    • content?: React.ReactText | React.ReactElement.<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
    • type?: NotificationManager.NotificationType - The type of the notification.
    • backgroundColor?: string - Define the notification background color.
    • icon?: string - An optional icon to be rendered inside the notification message.
    • timeout?: number - It will dismiss the notification after a certain time.
    • recurrenceTimeout?: number - If set, it will re-show the notification a certain time after it is dismissed.
    • closeButton?: boolean - Show a close button.
    • onClick?: (event) => void - Function called when notification message is clicked.
    • context?: object - Optional context for the notification.
    • isApplicable?: (notificationInstance) => boolean - Callback determining whether particular notification instance should be shown.
    • options?: NotificationManager.NotificationOptions - Options for the notification handlers.
      • browser: BrowserNotificationOptions - Browser notification options.
        • title?: string - Notification heading
        • body?: string - Notification content
        • onClick?: function - onclick event handler function
        • onClose?: function - onClose event handler function
        • onShow?: function - onShow event handler function
        • onError?: function - onError event handler function
        • options?: Object - The Notification options object from the JS Notifications API
      • target?: string - Name of target component.
    • actions?: Array.<React.ReactElement> - Array of notification actions.

Returns:

  • void

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
const notification = Notifications.showNotification(NotificationIds.OutboundCallCanceledNoAnswer);
Notifications.dismissNotification(notification);

dismissNotificationById(id) => void#

Dismiss notifications with the id.

Parameters:

  • id: string

    The id of the notification(s) to be dismissed.

Returns:

  • void

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.dismissNotificationById(NotificationIds.OutboundCallCanceledNoAnswer);

dismissAll() => void#

Dismiss all the active notifications.

Returns:

  • void

Example:

import { Notifications } from "@twilio/flex-ui";
Notifications.dismissAll();

registerHandler(handler) => void#

Register notification handler. Use to expose your notification handler.

Parameters:

  • handler: NotificationManager.NotificationHandler

    Notification handler.

Returns:

  • void

Example:

import { Notifications, NotificationHandler } from "@twilio/flex-ui";
const handler: NotificationHandler = new MyNotificationHandler();
Notifications.registerHandler(handler);

toggleNotificationHandler(id, enabled) => void#

Enable or disable notification handler.

Parameters:

  • id: NotificationManager.NotificationHandlerType

    Of the notification handler.

  • enabled: boolean

    Whether or not to enable or disable the handler.

Returns:

  • void

Example:

import { Notifications, DefaultNotificationHandlerType } from "@twilio/flex-ui";
Notifications.toggleNotificationHandler(DefaultNotificationHandlerType.Browser, false);

isNotificationHandlerEnabled() => boolean#

Returns whether the notification handler for the given id is enabled or not.

Returns:

  • boolean

    Whether the notification handler is enabled or not.

Example:

import { Notifications, DefaultNotificationHandlerType } from "@twilio/flex-ui";
Notifications.isNotificationHandlerEnabled(DefaultNotificationHandlerType.Browser);

exports.NotificationEvent: "notificationAdded" | "notificationDismissed" | "beforeAddNotification"#

List of Notification events.

Properties:

  • notificationAdded: "notificationAdded"

    Notification added.

  • notificationDismissed: "notificationDismissed"

    Notification dismissed.

  • beforeAddNotification: "beforeAddNotification"

    Before notification is added.

  • notificationStatusChanged: "notificationStatusChanged"

    Notification changed.

exports.NotificationType: "information" | "success" | "warning" | "error"#

NotificationType

Properties:

  • information: "information"

    Information notification.

  • success: "success"

    Success notification.

  • warning: "warning"

    Warning notification.

  • error: "error"

    Error notification.

registeredNotifications: Map.<string, NotificationManager.Notification>#

Map of registered notifications.

activeNotifications: Array.<NotificationManager.Notification>#

Array of active notifications.

handlers: NotificationManager.DefaultNotificationHandlers#

Registered notification handlers.

defaultTimeout: number#

Default timeout in milliseconds for the notifications.

registeredNotifications: Map.<string, NotificationManager.Notification>#

Map of registered notifications.

activeNotifications: Array.<NotificationManager.Notification>#

Array of active notifications.

handlers: NotificationManager.DefaultNotificationHandlers#

Registered notification handlers.

defaultTimeout: number#

Default timeout in milliseconds for the notifications.

Need some help?