ReactNotify

** You can see demo here **

Module of React that shows notifications / warnings. Just pass three arguments and it's all.

• Title
• Message (body)
• Duration (in ms)

You can use three type of notification - success, info, error. You can set different appearance to each notification by css.

var React = require('react');
var ReactNotify = require('react-notify');
 
React.createClass({
 
showNotification: function() {
  //this.refs.notificator.error("Title.", "Msg - body.", duration);
  //this.refs.notificator.info("Title.", "Msg - body.", duration);
  this.refs.notificator.success("Title.", "Msg - body.", 4000);
},
 
render: function() {
        return (
                <div>
                    <ReactNotify ref='notificator'/>
                </div>
        );
}
});

css

You can set appearance by css. For example it may looks like this.

.notify-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-start;
  position: absolute;
  top: 0;
  right: 0;
}
 
.notify-item {
  width: 250px;
  margin: 5px 10px;
  color: #FFF;
  border-radius: 5px;
}
 
.notify-item:hover {
  opacity: 0.8;
  box-shadow: 0 0 10px 0 rgb(15, 15, 15);
}
 
.notify-item > p {
  font-family: 'Lora', serif;
  margin: 10px;
  opacity: .8;
}
 
.notify-item.success {
  background-color: rgba(81, 163, 81, 0.4);
}
 
.notify-item.error {
  background-color: rgba(203, 100, 94, 0.8);
}
 
.notify-item.info {
  background-color: rgba(33, 150, 243, 0.8);
}
 
.notify-title {
  font-weight: 700;
}