-
Notifications
You must be signed in to change notification settings - Fork 249
Home
Welcome to the react-notification-system wiki!
Easy example without a button to show
index.html
<html>
<head>
<title>React Notification</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div id="app1"></div>
</body>
<script src="bundle.js"></script>
</html>
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://0.0.0.0:7000/',
'webpack/hot/only-dev-server',
'index.js'
],
context: path.resolve(__dirname, 'src'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
modules: ['node_modules', 'src'],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: [/\.jsx?$/, /\.js?$/],
use: ['babel-loader'],
exclude: /node_modules/
}
]
},
devServer: {
inline:true,
port: 7000
},
};
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ShowPopupMessage from './mensaje';
import Custom from './custom';
const showcase = [
{
title: 'Hey, it\'s good to see you!',
message: 'Now you can see how easy it is to use notifications in React!',
level: 'warning',
position: 'tr',
action: {
label: 'Awesome!',
callback: function () {
console.log('Clicked');
}
}
}, {
title: 'Hey, it\'s good to see you!',
message: 'I come with custom content!',
level: 'success',
position: 'tr',
children: (<Custom/>)
}, {
title: 'I\'ll be here forever!',
message: 'Just kidding, you can click me.',
level: 'success',
position: 'tr',
autoDismiss: 0
}, {
title: 'Bad things can happen too!',
message: 'Four notification types: success, error, warningandinfo',
level: 'error',
position: 'tl'
}, {
title: 'Advise!',
message: 'Showing all possible notifications works better on a larger screen',
level: 'info',
position: 'tc'
}, {
title: 'Warning!',
message: 'It\'s not a good idea show all these notifications at the same time!',
level: 'warning',
position: 'bc',
action: {
label: 'Got it!'
}
}, {
title: 'Success!',
message: 'I\'m out of ideas',
level: 'success',
position: 'bl'
}, {
title: 'I\'m here forever...',
message: 'Until you click me.',
autoDismiss: 0,
level: 'error',
position: 'br'
}
];
const data = {
title: 'Individual msg',
message: 'Is Alive!',
level: 'info',
position: 'tl',
action: {
label: 'Awesome!',
callback: function () {
console.log('Clicked');
}
}
}
ReactDOM.render(<ShowPopupMessage msgdata={showcase} />, document.getElementById('app'));
ShowMessage.js
import React from 'react';
import NotificationSystem from 'react-notification-system';
export default class ShowMensaje extends React.Component {
render() {
var self = this;
return (
<NotificationSystem ref={(ns)=>{
`this._notificationSystem = ns;`
`if (Array.isArray(this.props.msgdata)){`
`this.props.msgdata.forEach((msg, index) => this._notificationSystem.addNotification(msg, index));`
`} else {`
`this._notificationSystem.addNotification(this.props.msgdata, Math.floor(Math.random() * 999999));`
`}`
`}} />`
`);`
}
}