https://github.com/k4wo/react-notify
Tiny React's module that shows notifications.
https://github.com/k4wo/react-notify
notification notifications notify react reactjs
Last synced: about 1 year ago
JSON representation
Tiny React's module that shows notifications.
- Host: GitHub
- URL: https://github.com/k4wo/react-notify
- Owner: k4wo
- Created: 2015-07-23T19:53:50.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-05-19T11:28:57.000Z (about 9 years ago)
- Last Synced: 2025-04-10T04:15:36.849Z (about 1 year ago)
- Topics: notification, notifications, notify, react, reactjs
- Language: JavaScript
- Homepage: http://k4wo.github.io/react-notify/public/
- Size: 303 KB
- Stars: 55
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactNotify
## ** [You can see demo here](http://k4wo.github.io/react-notify/public/) **
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.
```javascript
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 (
);
}
});
```
# css
You can set appearance by css. For example it may looks like this.
```css
.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;
}
```