Need help with Notiflix?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

notiflix
255 Stars 34 Forks MIT License 123 Commits 0 Opened issues

Description

Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.

Services available

!
?

Need anything else?

Contributors list

# 356,450
CSS
notify
TypeScr...
50 commits

Notiflix

Notiflix


npm version Known Vulnerabilities TypeScript Downloads jsDelivr Size License

Notiflix

Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.

Current Version

3.1.0 *

Browser Compatibility

Chrome
||
Firefox
||
Safari
||
Edge
||
Opera
||
* Edge Legacy
||
* IE 10+

* SVG animations are not supported.


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

yarn add notiflix

npm

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

or only JS (All in One - Internal CSS)


or only Modules JS (All in One - Internal CSS)








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 prompt boxes. This module includes 2 types of prompts: "Show" and "Ask". An additional question can be asked as well within the prompt box if using the "Ask" one.

Show:

/*
* @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:

/*
* @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 }, );

------------------------------------

4- Loading Module

Notiflix Loading module can be used to show a loading indicator during a process (Fetch/XHR). Includes 6 types of animated SVG icons: "Standard", "Hourglass", "Circle", "Arrows", "Dots", and "Pulse". An additional type is "Custom", and it can be used with a custom SVG icon.

Show:

/*
* @param1 {string | Object}: Optional, a message in string format. Or, extending the initialize options with the new options for each loading indicator.
* @param2 {Object}: Optional, extending the initialize options with new the options for each loading indicator. (If the first parameter has been already used for a message.)
*/

// Only loading indicators Notiflix.Loading.standard(); Notiflix.Loading.hourglass(); Notiflix.Loading.circle(); Notiflix.Loading.arrows(); Notiflix.Loading.dots(); Notiflix.Loading.pulse();

// Loading indicator with a message Notiflix.Loading.standard('Loading...');

// Only loading indicator with the new options Notiflix.Loading.standard({ clickToClose: true, svgSize: '19px', });

// Loading indicator with a message, and the new options Notiflix.Loading.standard('Loading...', { backgroundColor: 'rgba(0,0,0,0.8)', });

Change:

/*
* @param1 {string}: Required, new message in string format.
*/

Notiflix.Loading.change('Loading %20');

Remove:

/*
* @param1 {number}: Optional, milliseconds for delaying in number format.
*/

// Remove immediately Notiflix.Loading.remove();

// Remove after delay => e.g. 1923ms Notiflix.Loading.remove(1923);

Custom:

// Only custom loading indicator
Notiflix.Loading.custom({
  customSvgUrl: 'https://notiflix.github.io/content/media/loading/notiflix-loading-nx-light.svg',
});

// Custom loading indicator with a message Notiflix.Loading.custom('Loading...', { customSvgUrl: 'https://notiflix.github.io/content/media/loading/notiflix-loading-nx-light.svg', });

------------------------------------

5- Block Module

Notiflix Block module can be used to block/unblock the elements during a process (Fetch/XHR), without locking the browser or the other elements/components to prevent the user’s interactions on the blocked elements.

Block:

/*
* @param1 {string | Array | NodeListOf}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to block.
* @param2 {string | Object}: Optional, a blocking message in string format. Or, extending the initialize options with the new options for each block element.
* @param3 {Object}: Optional, extending the initialize options with new the options for each block element. (If the second parameter has been already used for a blocking message.)
*/

// Only indicators Notiflix.Block.standard('.js-element'); Notiflix.Block.hourglass('.js-element'); Notiflix.Block.circle('.js-element'); Notiflix.Block.arrows('.js-element'); Notiflix.Block.dots('.js-element'); Notiflix.Block.pulse('.js-element');

// Indicator with a blocking message Notiflix.Block.standard('.js-element', 'Please wait...');

// Only indicator with the new options Notiflix.Block.standard('.js-element', { cssAnimationDuration: 1881, svgSize: '19px', });

// Indicator with a blocking message, and the new options Notiflix.Block.standard('.js-element', 'Please wait...', { backgroundColor: 'rgba(0,0,0,0.8)', });

Unblock:

/*
* @param1 {string | Array | NodeListOf}: Required, CSS selector(s) that matches the element(s) | Array of HTMLElments | NodeListOf HTMLElments to unblock.
* @param2 {number}: Optional, milliseconds for delaying in number format.
*/

// Unblock immediately Notiflix.Block.remove('.js-element');

// Unblock after delay => e.g. 1923ms Notiflix.Block.remove('.js-element', 1923);

------------------------------------

Initialize (optional)

Notiflix.*.init
function can be used to set custom options as globally.
// Notify
Notiflix.Notify.init({});

// Report Notiflix.Report.init({});

// Confirm Notiflix.Confirm.init({});

// Loading Notiflix.Loading.init({});

// Block Notiflix.Block.init({});

// e.g. Initialize the Notify Module with some options Notiflix.Notify.init({ width: '280px', position: 'right-top', distance: '10px', opacity: 1, // ... });

------------------------------------

Merge (optional)

Notiflix.*.merge
function can be used to deeply extend the
init()
options for a specific page or event globally.
// e.g. Merge the Notify Module's initialize options with some new options.
Notiflix.Notify.merge({
  width: '300px',
  // ...
});



Options

The default options of all modules.

Notiflix Notify Module: Default Options

Notiflix.Notify.init({
  width: '280px',
  position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' - 'center-top' - 'center-bottom' - 'center-center'
  distance: '10px',
  opacity: 1,
  borderRadius: '5px',
  rtl: false,
  timeout: 3000,
  messageMaxLength: 110,
  backOverlay: false,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  plainText: true,
  showOnlyTheLastOne: false,
  clickToClose: false,
  pauseOnHover: true,

ID: 'NotiflixNotify', className: 'notiflix-notify', zindex: 4001, fontFamily: 'Quicksand', fontSize: '13px', cssAnimation: true, cssAnimationDuration: 400, cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left' closeButton: false, useIcon: true, useFontAwesome: false, fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow' fontAwesomeIconSize: '34px',

success: { background: '#32c682', textColor: '#fff', childClassName: 'notiflix-notify-success', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-check-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(50,198,130,0.2)', },

failure: { background: '#ff5549', textColor: '#fff', childClassName: 'notiflix-notify-failure', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-times-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(255,85,73,0.2)', },

warning: { background: '#eebf31', textColor: '#fff', childClassName: 'notiflix-notify-warning', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-exclamation-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(238,191,49,0.2)', },

info: { background: '#26c0d3', textColor: '#fff', childClassName: 'notiflix-notify-info', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-info-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(38,192,211,0.2)', }, });


Notiflix Report Module: Default Options

Notiflix.Report.init({
  className: 'notiflix-report',
  width: '320px',
  backgroundColor: '#f8f8f8',
  borderRadius: '25px',
  rtl: false,
  zindex: 4002,
  backOverlay: true,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  fontFamily: 'Quicksand',
  svgSize: '110px',
  plainText: true,
  titleFontSize: '16px',
  titleMaxLength: 34,
  messageFontSize: '13px',
  messageMaxLength: 400,
  buttonFontSize: '14px',
  buttonMaxLength: 34,
  cssAnimation: true,
  cssAnimationDuration: 360,
  cssAnimationStyle: 'fade', // 'fade' - 'zoom'

success: { svgColor: '#32c682', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#32c682', buttonColor: '#fff', backOverlayColor: 'rgba(50,198,130,0.2)', },

failure: { svgColor: '#ff5549', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#ff5549', buttonColor: '#fff', backOverlayColor: 'rgba(255,85,73,0.2)', },

warning: { svgColor: '#eebf31', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#eebf31', buttonColor: '#fff', backOverlayColor: 'rgba(238,191,49,0.2)', },

info: { svgColor: '#26c0d3', titleColor: '#1e1e1e', messageColor: '#242424', buttonBackground: '#26c0d3', buttonColor: '#fff', backOverlayColor: 'rgba(38,192,211,0.2)', }, });


Notiflix Confirm Module: Default Options

Notiflix.Confirm.init({
  className: 'notiflix-confirm',
  width: '300px',
  zindex: 4003,
  position: 'center', // 'center' - 'center-top' - 'center-bottom' - 'right-top' - 'right-center' - 'right-bottom' - 'left-top' - 'left-center' - 'left-bottom'
  distance: '10px',
  backgroundColor: '#f8f8f8',
  borderRadius: '25px',
  backOverlay: true,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  rtl: false,
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationDuration: 300,
  cssAnimationStyle: 'fade', // 'zoom' - 'fade'
  plainText: true,

titleColor: '#32c682', titleFontSize: '16px', titleMaxLength: 34,

messageColor: '#1e1e1e', messageFontSize: '14px', messageMaxLength: 110,

buttonsFontSize: '15px', buttonsMaxLength: 34, okButtonColor: '#f8f8f8', okButtonBackground: '#32c682', cancelButtonColor: '#f8f8f8', cancelButtonBackground: '#a9a9a9', });


Notiflix Loading Module: Default Options

Notiflix.Loading.init({
  className: 'notiflix-loading',
  zindex: 4000,
  backgroundColor: 'rgba(0,0,0,0.8)',
  rtl: false,
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationDuration: 400,
  clickToClose: false,
  customSvgUrl: null,
  svgSize: '80px',
  svgColor: '#32c682',
  messageID: 'NotiflixLoadingMessage',
  messageFontSize: '15px',
  messageMaxLength: 34,
  messageColor: '#dcdcdc',
});

Notiflix Block Module: Default Options

Notiflix.Block.init({
  querySelectorLimit: 200,
  className: 'notiflix-block',
  position: 'absolute',
  zindex: 1000,
  backgroundColor: 'rgba(255,255,255,0.9)',
  rtl: false,
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationDuration: 300,
  svgSize: '45px',
  svgColor: '#383838',
  messageFontSize: '14px',
  messageMaxLength: 34,
  messageColor: '#383838',
});



Copyright

Copyright © 2019 - 2021 Notiflix

License

MIT license - https://opensource.org/licenses/MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.