Message Bar for Notifications in React

It’s very common to need a Message Area in our applications to display information to the user: success actions, errors, and more. The following code will provide a simple way to achieve that, without needing to copy-paste components in every Page or Component we have.

The Message Bar Component

This component is based on other 3rd party libraries. Therefore, in order to create first be sure to add the following dependencies in you application

"@material-ui/core": "^4.3.2",
"@material-ui/icons": "^4.2.1",
"html-react-parser": "^0.9.1",

Then create a file MessageBar.js and put this code into it.

import React from 'react'
import Snackbar from '@material-ui/core/Snackbar'
import SnackbarContent from '@material-ui/core/SnackbarContent'
import {
  amber, green, red, lightBlue
} from '@material-ui/core/colors'
import Parser from 'html-react-parser'
let showSuccessMessageFn
let showInfoMessageFn
let showWarningMessageFn
let showErrorMessageFn
const stylesMap = {
  success: {
    backgroundColor: green[600],
  },
  error: {
    backgroundColor: red[600],
  },
  info: {
    backgroundColor: lightBlue[600],
  },
  warning: {
    backgroundColor: amber[700],
  },
}
class MessageBar extends React.Component {
  constructor() {
    super()
    this.state = {
      open: false,
      message: '',
      variant: ''
    }
  }
  componentDidMount() {
    showSuccessMessageFn = this.buildShowMessage('success')
    showInfoMessageFn = this.buildShowMessage('info')
    showWarningMessageFn = this.buildShowMessage('warning')
    showErrorMessageFn = this.buildShowMessage('error')
  }
  buildShowMessage = (variant) => ({ message }) => {
    this.setState({
      open: true,
      message,
      variant,
    })
  };
    handleSnackbarClose = () => {
      this.setState({
        open: false,
        message: '',
      })
    };
    render() {
      const { message, open, variant } = this.state
      const messageContent = (
        <span
          id="snackbar-message-id"
        >
          {Parser(message)}
        </span>
      )
      return (
        <Snackbar
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
          onClose={this.handleSnackbarClose}
          open={open}
          ContentProps={{
            'aria-describedby': 'snackbar-message-id',
          }}
        >
          <SnackbarContent
            message={messageContent}
            style={stylesMap[variant]}
          />
        </Snackbar>
      )
    }
}
export function showSuccessMessage({ message }) {
  showSuccessMessageFn({ message })
}
export function showInfoMessage({ message }) {
  showInfoMessageFn({ message })
}
export function showWarningMessage({ message }) {
  showWarningMessageFn({ message })
}
export function showErrorMessage({ message }) {
  showErrorMessageFn({ message })
}
export default MessageBar

The “magic” here is how we export the functions show<Level>Message, and then attach them variables in the component. That way we can access those methods from any place in the application.

How to use it?

Once we created our MessageBar component, it’s time to start using in in our application. The first thing we need to do is to import it in our App.js component and add the MessageBar component tag.

import MessageBar  from './components/MessageBar'
.... 
<MessageBar/>

Then in your logic, wherever you need to show a message you can use the following methods

  • showSuccessMessage
  • showErrorMessage
  • showWarningMessage
  • showInfoMessage

This can be done in a Service or any other component or Java script class. For example:

import { showSuccessMessage, showErrorMessage } from './MessageBar'
...
//In your logic
callToMethod()
      .then(() => {
        showSuccessMessage({ message: 'Action done successfully' })
      })
      .catch((error) => {
        showErrorMessage({ message: error.message })
      })
Share

You may also like...

1 Response

  1. ปั้มไลค์ says:

    Like!! Great article post.Really thank you! Really Cool.

Leave a Reply to ปั้มไลค์ Cancel reply

Your email address will not be published. Required fields are marked *