Introducing Noti
Noti is a small js library that allows you to create simple ntoification on your website.
Setup up
Install
You can install Noti using npm or fork this repo
Usage
To use noti you need to include it in your html
Example
<body>
<div>
</div>
<script type="text/javascript" src="build/noti.js"></script>
</body>JS
Example
/*global noti*/
noti
.init({
containerId: "noti",
notiElClass: "notification",
tapToDismiss: true,
messageClass: "notification-message",
typesConfig: [{
type: "success",
className: "success"
}, {
type: "error",
className: "error"
}, {
type: "warning",
className: "warning"
}, ]
})
.createNoti({
message: "Successfully running notifiy",
type: "success",
showDuration: 7,
sticky: true,
onClick: function() {
noti.createNoti({
message: "Notification clicked",
type: "success",
showDuration: 2
})
}
})
.createNoti({
message: "Warning about something",
type: "warning",
showDuration: 5,
onShow: function() {
console.log("Showed")
}
})
.createNoti({
message: "Error something is wrong",
type: "error",
showDuration: 7,
onClick: function() {
noti.createNoti({
message: "Error dismissed",
type: "warning",
showDuration: 3
})
}
})Methods
noti.init([Object])
containerId : [String] When you call the createNoti method a new div element will be made inside your body tag. This is the container element id give it a name and use it in your css
notiElClass :[String]
This is the class name for the new noti div element that will be created inside the container element.
tapToDismiss:[Boolean]
Allow you to set if you the notification is dismissable
messageClass:[String] This is the class name for the new div element that will be created inside the noti element that will contain the notification message.
typesConfig:[Array]
This will contain an array containing objects that will specify the different types of notification and their class names.
Example
Here an example of calling the init method
noti.init({
containerId: "noti",
notiElClass: "notification",
tapToDismiss: true,
messageClass: "notification-message",
typesConfig: [{
type: "success",
className: "success"
}, {
type: "error",
className: "error"
}, {
type: "warning",
className: "warning"
}, ]
})Then in your css you would use those class and id names
#noti{
position:absolute;
margin-left:35px;
margin-top:25px;
display:block;
}
.notification{
color:white;
border-radius:15px;
padding:15px;
padding-right:10px;
margin-bottom:15px;
width:15em;
word-wrap: break-word;
}
.error{
background-color:rgb(231, 76, 60)
}
.success{
background-color:rgb(46, 204, 113)
}
.warning{
background-color:rgb(241, 196, 15)
}
.primary{
background-color:rgb(52, 152, 219);
}noti.createNoti([Object])
message:[String] Specify the message that the element will contain
type:[String] The type of notification element you want to display
Note you need to specify the types in when you call noti.init() Example of type config below
noti.init({
typesConfig: [{
type: "success",
className: "success"
}, {
type: "error",
className: "error"
}, {
type: "warning",
className: "warning"
}, ]
})showDuration:[int] The amount of time you want to show a specific element
onClick:[function] function that is called when the element is clicked on
Example
noti.createNoti({
message: "Successfully running notifiy",
type: "success",
showDuration: 7,
sticky: true,
onClick: function() {
noti.createNoti({
message: "Notification clicked",
type: "success",
showDuration: 2
})
}
})