This React component defines a notification and modal example. It allows you to add, remove and display notifications with an option to switch between notification and modal modes.
The addNotification function adds a new notification to the notificationArr array and sets a timer to remove it after a certain period of time. The removeNotification function removes the oldest notification from the array when called. The toggleMode function switches between the Notification and Modal modes and removes all notifications when switching to the Modal mode.
How to Create React Notification Example
First, create a div element with an id “root” as follows:
<body> <div id="root"></div> </body>
After that, add the following CSS styles for the basic layout of page and notfications:
/* Index */
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #222;
}
/* App */
.App {
text-align: center;
}
/* Header */
.Logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.Header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Button */
button {
background-color: #306B7B;
border: none;
cursor: pointer;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 10px;
}
.Button-alert {
background-color: #AEA53B;
}
/* Notification Container */
.Notification-container {
position: fixed;
width: 320px;
padding: 0 10px 10px;
z-index: 1;
box-sizing: border-box;
height: auto;
/* `Top-right` is the default */
top: 0px;
bottom: auto;
left: auto;
right: 0px;
}
.Bottom-right {
top: auto;
bottom: 0px;
left: auto;
right: 0px;
}
.Bottom-left {
top: auto;
bottom: 0px;
left: 0px;
right: auto;
}
.Top-left {
top: 0px;
bottom: auto;
left: 0px;
right: auto;
}
/* Notification */
.Info {
position: relative;
width: 100%;
font-size: 16px;
margin: 10px 0 0;
padding: 10px;
box-sizing: border-box;
opacity: 1;
transition: 0.3s ease-in-out;
transform: translate3d(0px, 0px, 0px);
will-change: transform, opacity;
background: #ADEBFC;
color: #2E6C7D; /* 50% darker http://www.hexcolortool.com */
}
.Alert {
background: #FBF06C;
color: #7C7100; /* 50% darker http://www.hexcolortool.com */
}
.Warning {
background: #E26F53;
color: #630000; /* 50% darker http://www.hexcolortool.com */
}
/* Modal */
.Modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* background to close the modal when clicking outside of `Modal-content` */
.Modal-close {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
}
.Modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
width: 80%;
}
.Close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.Close:hover,
.Close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Now, load the ReactJS by adding the following CDN links before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
Finally, add the following JavaScript function to your project.
class App extends React.Component {
constructor() {
super();
this.toggleMode = this.toggleMode.bind(this);
this.addNotification = this.addNotification.bind(this);
this.removeNotification = this.removeNotification.bind(this);
this.state = {
notificationArr: [],
key: 0,
modal: false };
}
toggleMode() {
if (!this.state.modal) {
this.removeAllNotifications();
}
this.setState(prevState => ({
modal: prevState.modal = !prevState.modal }));
}
removeAllNotifications() {
this.setState(prevState => ({
notificationArr: prevState.notificationArr = [] }));
}
showModal() {
const modal = document.getElementById('SpecialModal');
modal.style.display = 'block';
}
addNotification() {
const notification = /*#__PURE__*/
React.createElement(Notification, {
key: this.state.key
/*
Define `props` values of your notification here.
Choose the `type` prop between:
- Alert (yellow)
- Warning (red)
If you don't set a `text`, `type` or `time` value, the default
values will be active.
The default value for `type` is: `Info` (blue).
The default value for `text` is: `Lorem ipsum`.
The default value for `time` is: `3000` (3s).
*/,
type: "",
text: "Love in form of an notification",
time: "8000" });
// state updates may be asynchronous, so use the second form of `setState()`
this.setState(prevState => ({
// http://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs
notificationArr: prevState.notificationArr.concat(notification),
key: prevState.key + 1 }));
this.timeoutNotification(notification.props.time);
}
timeoutNotification(time) {
const delay = time ? time : 3000;
setTimeout(this.removeNotification, delay);
}
removeNotification() {
const arr = this.state.notificationArr;
const arrLength = arr.length;
// Use `slice()` because it doesn't mutate the original array,
// it's good for React state handling and functional programming.
const newArr = arrLength ? arr.slice(0, arrLength - 1) : [];
this.setState(prevState => ({
notificationArr: prevState.notificationArr = newArr }));
}
render() {
const notifications = this.state.notificationArr;
const isModal = this.state.modal;
return /*#__PURE__*/(
React.createElement("div", { className: "App" }, /*#__PURE__*/
React.createElement(Header, null),
isModal ? /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement(Button, { class: "Button-alert", text: "Notification Mode", onClick: this.toggleMode }), /*#__PURE__*/
React.createElement(Button, { text: "React Modal", onClick: this.showModal }), /*#__PURE__*/
React.createElement(Modal, null)) : /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement(Button, { class: "Button-alert", text: "Modal Mode", onClick: this.toggleMode }), /*#__PURE__*/
React.createElement(Button, { text: "React Notification", onClick: this.addNotification }), /*#__PURE__*/
React.createElement(NotificationContainer
/*
Define the `position` of the notification here.
Choose between:
- Bottom-right
- Bottom-left
- Top-left
If you don't set a value, the default value: `Top-right`
will be active.
*/, {
position: "Top-left" },
notifications))));
}}
class Header extends React.Component {
render() {
return /*#__PURE__*/(
React.createElement("div", { className: "Header" }, /*#__PURE__*/
React.createElement("img", { src: "https://agile-basin-61855.herokuapp.com/static/media/logo.5d5d9eef.svg", className: "Logo", alt: "logo" })));
}}
class Button extends React.Component {
render() {
return /*#__PURE__*/(
React.createElement("button", { className: this.props.class, onClick: this.props.onClick },
this.props.text));
}}
class NotificationContainer extends React.Component {
render() {
const position = this.props.position ? ' ' + this.props.position : '';
return /*#__PURE__*/(
React.createElement("div", { className: "Notification-container" + position },
this.props.children));
}}
class Notification extends React.Component {
render() {
const type = this.props.type ? ' ' + this.props.type : '';
const text = this.props.text ? this.props.text : 'Lorem ipsum';
return /*#__PURE__*/(
React.createElement("div", { className: "Info" + type }, /*#__PURE__*/
React.createElement("p", null, text)));
}}
class Modal extends React.Component {
hideModal() {
const modal = document.getElementById('SpecialModal');
modal.style.display = 'none';
}
render() {
return /*#__PURE__*/(
React.createElement("div", { id: "SpecialModal", className: "Modal" }, /*#__PURE__*/
React.createElement("div", { className: "Modal-close", onClick: this.hideModal }), /*#__PURE__*/
React.createElement("div", { className: "Modal-content" }, /*#__PURE__*/
React.createElement("span", { className: "Close", onClick: this.hideModal }, "\xD7"), /*#__PURE__*/
React.createElement("p", null, "A very interesting message in a large nice modal"))));
}}
ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('root'));
That’s all! hopefully, you have successfully integrated this React notification component into your project. If you have any questions or suggestions, feel free to comment below.
