0.0.5 • Published 6 years ago
multisnackbar v0.0.5
MultiSnackBar
Partially violate the spec of snackbar to make it handy showing notifications.
Built with React 16 and also work with vanilla js
Usage
With React
Install with npm
npm install --save multisnackbarInclude CSS Styling file
node_modules/multisnackbar/lib/css/style.cssCreate react app
import React from 'react';
import ReactDOM from 'react-dom';
import {MSBManager} from 'multisnackbar';
const messages = [
{header: 'Lorem ipsum dolor sit', subheader: 'hendrerit aliquam urna viverra'},
{header: 'a dictumst. Aenean dapi', subheader: 'empor nibh. Nunc eget feugiat elit'},
{header: 'or dui aliquam fermentum', subheader: 'st, faucibus ut libero eu, euismod'},
{header: 'uris convallis. Duis gra', subheader: 'quis accumsan nunc mattis. Phasellus'},
{header: 'Cras mauris tortor', subheader: 'Curabitur et urna purus. Donec nec ante tempor'},
];
class App extends React.Component {
constructor(props) {
super(props);
this.msbManager = new MSBManager({
elementId: 'multisnackbar',
duration: 3000,
max: 5,
});
this.showNewMessage = this.showNewMessage.bind(this);
}
showNewMessage() {
const message = messages[Math.floor(Math.random() * messages.length)];
return this.msbManager.push({
message: (
<div className="message-group">
<div className="message-header">{message.header}</div>
<div className="message-subheader">{message.subheader}</div>
</div>
),
});
}
render() {
return (
<button onClick={this.showNewMessage}>Show Message</button>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('react-root')
);With plain JS
<!-- style.css -->
<link href="https://cdn.rawgit.com/ZijianHe/multisnackbar/00e0a5e6/dist/style.css">
<!-- main.js -->
<script type="text/javascript" src="https://cdn.rawgit.com/ZijianHe/multisnackbar/00e0a5e6/dist/main.js"></script>Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multisnackbar with plain JS</title>
<link rel="stylesheet" type="text/css" href="../../dist/style.css">
</head>
<body>
<div id="multisnackbar"></div>
<button onclick="window.showNewMessage()">New Message</button>
<script type="application/javascript" src="../../dist/main.js"></script>
<script>
const messages = [
{header: 'Lorem ipsum dolor sit', subheader: 'hendrerit aliquam urna viverra'},
{header: 'a dictumst. Aenean dapi', subheader: 'empor nibh. Nunc eget feugiat elit'},
{header: 'or dui aliquam fermentum', subheader: 'st, faucibus ut libero eu, euismod'},
{header: 'uris convallis. Duis gra', subheader: 'quis accumsan nunc mattis. Phasellus'},
{header: 'Cras mauris tortor', subheader: 'Curabitur et urna purus. Donec nec ante tempor'},
];
const msbManager = new window.MSBManager({
elementId: 'multisnackbar',
duration: 3000,
max: 5,
position: 'left',
dangerouslyInsert: true,
});
window.showNewMessage = () => {
const message = messages[Math.floor(Math.random() * messages.length)];
return msbManager.push({
message: `
<div class="message-group">
<h4 class="message-header">${message.header}</h4>
<h5 class="message-subheader">${message.subheader}</h5>
</div>
`,
});
};
</script>
</body>
</html>Demo
Please checkout the jsfiddle demo: https://jsfiddle.net/zsunkr27/2/
License
MIT