Notiflix
Notiflix is a dependency-free, secure, and lightweight JavaScript library built with pure JavaScript, offering client-side non-blocking notifications, popup boxes, loading indicators, and more.
Install / Use
/learn @notiflix/NotiflixREADME
Notiflix
Notiflix is a dependency-free, secure, and lightweight JavaScript library built with pure JavaScript, offering client-side non-blocking notifications, popup boxes, loading indicators, and more.
It is designed to enhance the user experience without the need for heavy dependencies, making it suitable for a wide variety of projects.
Current Version
3.2.8 *
Browser Compatibility
Chrome || Firefox || Safari || Edge || Opera || * Edge Legacy || * IE 10+
<sub>* SVG animations are not supported.</sub>
Documentation
https://notiflix.github.io/documentation
Modules (Demo/Playground)
- Notiflix Notify => https://notiflix.github.io/notify
- Notiflix Report => https://notiflix.github.io/report
- Notiflix Confirm => https://notiflix.github.io/confirm
- Notiflix Loading => https://notiflix.github.io/loading
- Notiflix Block => https://notiflix.github.io/block
(A) Install and Import
Install
yarn add notiflix
npm i notiflix
Import
// all modules
import Notiflix from 'notiflix';
// one by one
import { Notify } from 'notiflix/build/notiflix-notify-aio';
import { Report } from 'notiflix/build/notiflix-report-aio';
import { Confirm } from 'notiflix/build/notiflix-confirm-aio';
import { Loading } from 'notiflix/build/notiflix-loading-aio';
import { Block } from 'notiflix/build/notiflix-block-aio';
(B) Add to an HTML page (Global)
CSS and JS
<link rel="stylesheet" href="dist/notiflix-3.2.8.min.css" />
<script src="dist/notiflix-3.2.8.min.js"></script>
or only JS (All in One - Internal CSS)
<script src="dist/notiflix-aio-3.2.8.min.js"></script>
or only Modules JS (All in One - Internal CSS)
<script src="dist/notiflix-notify-aio-3.2.8.min.js"></script>
<script src="dist/notiflix-report-aio-3.2.8.min.js"></script>
<script src="dist/notiflix-confirm-aio-3.2.8.min.js"></script>
<script src="dist/notiflix-loading-aio-3.2.8.min.js"></script>
<script src="dist/notiflix-block-aio-3.2.8.min.js"></script>
Usage
1- Notify Module
Notiflix Notify module can be used to send non-blocking alerts/notifications. This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
/*
* @param1 {string}: Required, a text in string format.
* @param2 {function | Object}: Optional, a callback function that will be called when the notification element has been clicked. Or, extending the initialize options with the new options for each notification element.
* @param3 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the second parameter has been already used for a callback function.)
*/
// e.g. Only message
Notiflix.Notify.success('Sol lucet omnibus');
Notiflix.Notify.failure('Qui timide rogat docet negare');
Notiflix.Notify.warning('Memento te hominem esse');
Notiflix.Notify.info('Cogito ergo sum');
// e.g. Message with a callback
Notiflix.Notify.success(
'Click Me',
function cb() {
// callback
},
);
// e.g. Message with the new options
Notiflix.Notify.success(
'Click Me',
{
timeout: 6000,
},
);
// e.g. Message with callback, and the new options
Notiflix.Notify.success(
'Click Me',
function cb() {
// callback
},
{
timeout: 4000,
},
);
------------------------------------
2- Report Module
Notiflix Report module can be used to show extended notifications that contain a title, description, and button(with a callback function). This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".
/*
* @param1 {string}: Required, title text in string format.
* @param2 {string}: Required, message text in string format.
* @param3 {string}: Required, button text in string format.
* @param4 {function | Object}: Optional, a callback function that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.
* @param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)
*/
// e.g. Only title, message, and button text
Notiflix.Report.success('Title', 'Message', 'Button Text');
Notiflix.Report.failure('Title', 'Message', 'Button Text');
Notiflix.Report.warning('Title', 'Message', 'Button Text');
Notiflix.Report.info('Title', 'Message', 'Button Text');
// e.g. With a callback
Notiflix.Report.success(
'Title',
'Message',
'Button Text',
function cb() {
// callback
},
);
// e.g. With the new options
Notiflix.Report.success(
'Title',
'Message',
'Button Text',
{
width: '360px',
svgSize: '120px',
},
);
// e.g. With a callback, and the new options
Notiflix.Report.success(
'Title',
'Message',
'Button Text',
function cb() {
// callback
},
{
width: '360px',
svgSize: '120px',
},
);
------------------------------------
3- Confirm Module
Notiflix Confirm module can be used to show non-blocking confirm/prompt boxes. This module includes 3 types of prompts: "Show", "Ask", and "Prompt". An additional question can be asked within the prompt box if using the "Ask" and/or "Prompt" ones unlike the "Show" one.
Show:
This method can be used to show a confirm box with info, and take the custom actions via the callback functions.
/*
* @param1 {string}: Required, title text in string format.
* @param2 {string}: Required, message/question in string format.
* @param3 {string}: Required, OK button text in string format.
* @param4 {string}: Optional, Cancel button text in string format.
* @param5 {function}: Optional, a callback function that will be called when the OK button element has been clicked.
* @param6 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.
* @param7 {Object}: Optional, extending the initialize options with new the options for each confirm box.
*/
Notiflix.Confirm.show(
'Notiflix Confirm',
'Do you agree with me?',
'Yes',
'No',
function okCb() {
alert('Thank you.');
},
function cancelCb() {
alert('If you say so...');
},
{
width: '320px',
borderRadius: '8px',
// etc...
},
);
Ask:
This method can be used to ask a question within a confirm box. The confirm box doesn't remove till the client gives the correct answer. Or, the client can click on the cancel button to close/remove the confirm box as well.
/*
* @param1 {string}: Required, title text in string format.
* @param2 {string}: Required, question text in string format.
* @param3 {string}: Required, answer text in string format.
* @param4 {string}: Required, OK button text in string format.
* @param5 {string}: Optional, Cancel button text in string format.
* @param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.
* @param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.
* @param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.
*/
Notiflix.Confirm.ask(
'Where is Padmé?',
'Is she safe? Is she all right?',
'It seems, in your anger, you killed her.',
'Answer',
'Cancel',
function okCb() {
alert('😡 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!');
},
function cancelCb() {
alert('😪 ...');
},
{
// Custom options
},
);
Prompt:
This method works similarly as window.prompt(). The client doesn't have to type a correct answer to the input element to proceed unlike the Notiflix.Confirm.ask(); method. The client answer passes to the callback functions as a parameter and this parameter is always a string.
/*
* @param1 {string}: Required, title text in string format.
* @param2 {string}: Required, question text in string format.
* @param3 {string}: Required, default answer text in string format. An empty string can be used as well.
* @param4 {string}: Required, OK button text in string format.
* @param5 {string}: Optional, Cancel button text in string form
