Notyf is a dead simple, responsive, vanilla javascript notification plugin. No jQuery required.
Demo: carlosroso.com/notyf
npm install --save notyf
bower install --save notyf
Now add it to your project:
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="/path/to/notyf.min.css">
</head>
<body>
...
<script src="/path/to/notyf.min.js" type="text/javascript"></script>
</body>
</html>// Create an instance of Notyf
var notyf = new Notyf();
// Display an alert notification
notyf.alert('You must fill out the form before moving forward');
// Display a success notification
notyf.confirm('Your changes have been successfully saved!');When importing Notyf via CommonJS modules, for example for Vue or Angular on top of Webpack, you can import the module as shown below:
// Import Notyf using CommonJS require
var Notyf = require('notyf');
import 'notyf/dist/notyf.min.css';
// Create an instance of Notyf
var notyf = new Notyf()
// Display an alert notification
notyf.alert('Please fill out the form')You can set some options when creating a Notyf instance.
| Param | Type | Default | Details |
|---|---|---|---|
| delay | Number |
2000 | Number of miliseconds the notification must be shown |
| alertIcon | String |
Custom Notyf icon | CSS class of the icon shown in an alert notification |
| confirmIcon | String |
Custom Notyf icon | CSS class of the icon shown in a success notification |
This is an example of setting Notyf with a 1s delay and FontAwesome alert and success icons (be sure to include FontAwesome in your project):
var notyf = new Notyf({
delay:1000,
alertIcon: 'fa fa-exclamation-circle',
confirmIcon: 'fa fa-check-circle'
})Notyf is under MIT licence