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.

varReact=require('react');varReactNotify=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><ReactNotifyref='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:5px10px;
color:#FFF;
border-radius:5px;
}
.notify-item:hover {
opacity:0.8;
box-shadow:0010px0rgb(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;
}