TBC Common React App Snackbar Notifier

Common Snackbar Notifiers for all Trinidad Benham React apps

Install

npm install --save tbc-common-snackbar

Redux Store

In Actions.js file:

import * as snackbarActions from "tbc-common-snackbar/dist/Redux/SnackbarActions";

Then add "snackbarActions" to actions object.

In configureStore.js file:

import snackbarState from "tbc-common-snackbar/dist/Redux/snackbarReducer";

Then add "snackbarState" to combineReducers object.

In action files that should dispatch "addSnackbar":

import { addSnackbar } from "tbc-common-snackbar/dist/Redux/SnackbarActions";

Snackbar Notifier Component:

This module requires the notistack module (see below).

At the top presentation level (Main.jsx, for instance):

import { SnackbarProvider } from "notistack";

Encapsulate component within the SnackbarProvider:

<SnackbarProvider maxSnack={3}>...</SnackbarProvider>

Then add:

import SnackbarNotifier from "tbc-common-snackbar/dist/Component/SnackbarNotifier";

And place <SnackbarNotifier /> at top of encapsulated JSX.

Activating Snackbar

To active a Snackbar, dispatch addSnackbar({messageObject})

addSnackbar takes an Object parameter which contains:

• message: This is the message to be displayed
• type: type of message. Type options are:
  • "info"
  • "warning"
  • "error"
  • "success"

Examples:

addSnackbar({ message: "Success Message", type: "success" });

addSnackbar({ message: "Error Message", type: "error" });

PropTypes

import * as snackbarTypes from "tbc-common-snackbar/dist/Types/types";

Component.propTypes = {
  snackbarState: snackbarTypes.snackbarState.types
};

Component.defaultProps = {
  snackbarState: snackbarTypes.snackbarState.defaults
};

Required NPM Packages

npm install --save notistack bootstrap reactstrap @material-ui/core lodash

Testing

For any unit test file that deep renders ("mounts") this imported component, add the following:

jest.mock("tbc-common-snackbar/dist/Component/SnackbarNotifier", () => "div");