Notifications

The Flight framework includes a simple notification system that can be used to display notifications (or 'toasts') to the user. This is most commonly used for feedback when adding items to the cart, for example.

The Notifications component

import { Notifications } from '@jetshop/core/components/Notifications';

This component is used to determine where you would like notifications to appear. All notifications will appear stacked inside this container component. Generally this component would be placed in the header or inside a portal.

Styling notifications

The Notifications component can take a className, and should be styled according to how you want your notifications to display. For example, to display notifications in the top-right of the screen, you should import this component and style it with the following:

position: fixed;
right: 1em;
top: 1em;
z-index: 500;

(note the z-index is an arbitrarily high number here to ensure it displays above other elements).

The individual notifications can also be styled here, by nesting styles within the Notifications component.

Each notification has data attributes attached to it, which can be used for styling and animating. The attribute values also change depending on the current state of the notification. The attributes are as follows:

• [data-flight-notification='summoned'] : The notification has been triggered
• [data-flight-notification='entering'] : The notification is entering (applied by default for 800ms)
• [data-flight-notification='idle.expiring'] : The notification is displaying, and will expire. By default, it expires in 1600ms
• [data-flight-notification='idle.persisting'] : The notification is displaying, and has been configured to persist until manually closed
• [data-flight-notification='exiting'] : The notification has been dismissed (applied by default for 400ms)

An example of how these data attributes can be used for styling (in this case, applying transitions):

[data-flight-notification] {
  transition: opacity ${1600 / 2}ms ease-out,
    transform ${1600 / 8}ms ease-in-out,
    max-height ${1600 / 4}ms ease-in-out;
}
[data-flight-notification='summoned'],
[data-flight-notification='exiting'] {
  transform: translateX(100%));
}
[data-flight-notification='entering'],
[data-flight-notification*='idle'] {
  transform: translateX(0);
}
[data-flight-notification='exiting'] {
  opacity: 0;
  max-height: 0;
}

Dismiss button

Each notification by default has a dismiss button embedded in it. This is a button that displays an svg X inside it. The button has a data attribute on it, which can be used for styling: [data-flight-notification-dismiss].

Notification types

When a notification is triggered, it is possible to pass it a type option (more on this below). This type can be any string, and can be used for styling. For example, if you pass the type 'add-to-cart', the notification will be rendered with the data attribute [data-flight-notification-type='add-to-cart']. You could then target this attribute in your styling:

[data-flight-notification-type="add-to-cart"] {
  color: red;
}

Triggering notifications

trigger(content: text | React.ReactNode, options?: { type?: string; id?: string; autoCloseAfter?: number })

Example:

import { useNotification } from "@jetshop/core/components/Notifications";

const [trigger, dismiss] = useNotification();

trigger("a string to display", { type: "important", autoCloseAfter: 2000 });
trigger(<Example />, { type: "a-persistent-notification", autoCloseAfter: 0 });

Triggering a notification is as simple as the above example. The useNotification hook in core returns a tuple with trigger and dismiss functions.

The trigger function takes a string or a React component as the first argument, and an options object as the second argument.

Trigger options

Dismissing notifications

Notifications will dismiss automatically, after the autoCloseAfter period expires. They will then be removed from the DOM.

You can also manually dismiss notifications, if you require.

The dismiss function will dismiss all visible notifications if called with no argument. To dismiss a specific notification, pass it the id of that notification.

const [trigger, dismiss] = useNotification()

trigger('a unique notification', { id: 'very-unique-1234' })

<button onClick={() => dismiss('very-unique-1234')}>Close the notification</button>