@meniga/notifications

@meniga/notifications

This package is used to display notifications to the user, for example whether an action that required server activity was successful or not. It uses a local store to keep track of notifications and event listeners to react to the changes.

The UI component that is used is NotificationBar from @meniga/ui, see possible props and modifiers here: https://developer.meniga.cloud/index.html?path=/story/alerts-notificationbar--default

Usage

• Use the NotificationsBar component in your app layout file, to position where the notification should be displayed.

Example:

import { NotificationsBar } from '@meniga/notifications';

(somewhere in your app layout)

<NotificationsBar />

• Import the 'showNotification' utility function from the package in order to show a notification (for example in an event handler when responding to a successful or a failed API request).

Params:

• type string - type of notification to display, scan be 'info', 'positive', 'warning' or 'negative'.
• text string - the text to display in the notification.
• title string - an optional title to display in the notification (optional).
• id string - a unique id for the notification (optional)
• useTimeout boolean - whether or not to use a timeout to hide the notification (optional, default = true).
• ui object - props to pass to NotificationBar component (optional).

import { showNotification } from '@meniga/notifications';

showNotification(type, text, icon, id, useTimeout, { ...ui });

If you set useTimeout as false, you have to specify a unique id for the notification, because the only way to dismiss the notification is to then use the hideNotification(id) method.

import { showNotification, hideNotification } from '@meniga/notifications';

const notificationId = 'my-unique-id';

showNotification(type, text, notificationId, false);
hideNotification(notificationId);