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 })
})
Like!! Great article post.Really thank you! Really Cool.