Developing toast notifications

A toast as a computing term refers to a graphical control element that communicates certain events to the user without forcing them to react to the notification immediately. In the Universal Access Responsive Web Application, we use the design system Alert component as a base to represent our toast notifications and allow capability to display these notifications independent of the main display content in any function within the application.

The <Toaster> component

The exposed <Toaster> component is used in App.js and is responsible for rendering toast notifications retrieved directly from the Redux store. These notifications are displayed independent of page content. This means that a deeply nested function can be used to display a notification without regard to the current component render and/or functionality that is used to navigate to different pages.

The <Toaster> component handles the retrieving of toast slice within the store, and in passing functionality to remove toast notifications after they are dismissed.

The <Toast> component

The exposed <Toast> is the preferred component to display toast notifications. It accepts properties as defined by the web design system Alert component, without requiring the need to specify the component as an Alert and the banner, center, and toast properties. It also requires a text property to be defined.

The Toaster module

Any component that intends to display a toast notification within it's processing must use the Toaster module action fillToaster function. This can be either passed to the component as a property, or connected to the Redux store and defining the action as a property. For more information, see Universal Access Redux modules.

An example of a page that implements the Toaster module action fillToaster and a service unavailable toast notification is shown.

import React from 'react';
import { connect } from 'react-redux';
import { ToasterActions } from '@spm/universal-access';
import { Toast } from '@spm/universal-access-ui';

...

/**
 * Updates the Toast slice of Redux store
 * @param {*} dispatch the dispatch function
 */
export function mapDispatchToProps(dispatch) {
  return {
    fillToaster: data => {
      ToasterActions.fillToaster(dispatch, data);
    },
  };
}

class MyComponent extends React.Component {
  
  ...
	
  doSomething({ success }) {
    if (success) {
     ...
    }
    else {
      this.props.fillToaster(
        <Toast
          dismissable={false}
          expireAfter={5}
          text="This service is currently unavailable"
          type="danger"
        />
      );
    }
  }

 ...

export default connect(
  null,
  mapDispatchToProps
)(MyComponent);