Description of icon
Flex UI
API Reference

NotificationManager

NotificationsManager provides a client-side API to manage notifications in Flex UI. For more go to Flex Notifications

registerNotification(notification) => void#

Register notification.

Parameters:

  • notification: NotificationManager.Notification

    The notification to be registered.

    • id: string - The id for the notification.
    • instanceId: string - The id for the shown instance of this notification. Not assignable: generated automatically for an active notification in showNotification.
    • content?: React.ReactText | React.ReactElement<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
    • dropdownContent?: Array<object> - Listed additional content that is initially collapsed.
    • 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.
        • instanceId: string - The id for the shown instance of this notification. Not assignable: generated automatically for an active notification in showNotification.
        • content?: React.ReactText | React.ReactElement<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
        • dropdownContent?: Array<object> - Listed additional content that is initially collapsed.
        • 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?, dropdownContent?) => 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.

  • dropdownContent?: Array<object>

    Content to be rendered in a dropdown when expanded

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.
    • instanceId: string - The id for the shown instance of this notification. Not assignable: generated automatically for an active notification in showNotification.
    • content?: React.ReactText | React.ReactElement<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
    • dropdownContent?: Array<object> - Listed additional content that is initially collapsed.
    • 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.
    • instanceId: string - The id for the shown instance of this notification. Not assignable: generated automatically for an active notification in showNotification.
    • content?: React.ReactText | React.ReactElement<NotificationContentProps> - A content for the in-app notification. In-app notification is not shown if value is falsy.
    • dropdownContent?: Array<object> - Listed additional content that is initially collapsed.
    • 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);

isNotificationActive(id) => boolean#

Check whether the notification is already present.

Parameters:

  • id: string

    The id of the notification that may already be present.

Returns:

  • boolean

    • Whether the notification is already present.

Example:

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

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.

Default Value:

8000

Rate this page

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.