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; }
