Elegant Notification Popup JavaScript Library – Notiflix

Category: Javascript , Notification | April 8, 2020
Author: notiflix
Views Total: 1,040
Official Page: Go to website
Last Update: April 8, 2020
License: MIT

Preview:

Elegant Notification Popup JavaScript Library – Notiflix

Description:

Notiflix is a flexible, powerful and customizable notification popup library that sends different types of notification messages to the user.

Features:

  • Toast-like alert notifications: Success, Failure, Warning, and Info.
  • Confirmation popup boxes.
  • Report dialog boxes: Success, Failure, Warning, and Info.
  • 6 loading indicators: Standard, Hourglass, Circle, Arrows, Dots, and Pulse.

How to use it:

Installation:

# Yarn
$ yarn add notiflix

# NPM
$ npm install notiflix --save

Load the required JavaScript and CSS files in the document.

<link rel="stylesheet" href="notiflix-version.min.css" />
<script src="notiflix-version.min.js"></script>

Create an alert notification.

Notiflix.Notify.Init({
  // options here
});

// or
Notiflix.Notify.Success('Success message');
Notiflix.Notify.Failure('Failure message');
Notiflix.Notify.Warning('Warning message');
Notiflix.Notify.Info('Info message ');
Notiflix.Notify.Success('Success message', function(){
  // Callback 
});

Create a confirmation dialog.

Notiflix.Confirm.Init({
  // defaults
  ID: "NotiflixConfirmWrap",
  className: "notiflix-confirm",
  width: "280px",
  zindex: 4003,
  position: "center",
  distance: "10px",
  backgroundColor: "#f8f8f8",
  borderRadius: "25px",
  backOverlay: !0,
  backOverlayColor: "rgba(0,0,0,0.5)",
  rtl: !1,
  useGoogleFont: !0,
  fontFamily: "Quicksand",
  cssAnimation: !0,
  cssAnimationStyle: "fade",
  cssAnimationDuration: 300,
  titleColor: "#00b462",
  titleFontSize: "16px",
  titleMaxLength: 34,
  messageColor: "#1e1e1e",
  messageFontSize: "14px",
  messageMaxLength: 110,
  buttonsFontSize: "15px",
  buttonsMaxLength: 34,
  okButtonColor: "#f8f8f8",
  okButtonBackground: "#00b462",
  cancelButtonColor: "#f8f8f8",
  cancelButtonBackground: "#a9a9a9"
});

// or
Notiflix.Confirm.Show('Confirm Title','Confirm Message','Ok Button Text');

// with callbacks
Notiflix.Confirm.Show(
  'Confirm Title',
  'Confirm Message',
  'Ok Button Text',
  'Cancel Button Text',
  function(){
  // yes callback
  },
  function(){
  // no
  }
);

Create a report dialog.

Notiflix.Report.Init({
  // defaults
  ID: "NotiflixReportWrap",
  className: "notiflix-report",
  width: "320px",
  backgroundColor: "#f8f8f8",
  borderRadius: "25px",
  rtl: !1,
  zindex: 4002,
  backOverlay: !0,
  backOverlayColor: "rgba(0, 0, 0, 0.5)",
  useGoogleFont: !0,
  fontFamily: "Quicksand",
  svgSize: "110px",
  plainText: !0,
  titleFontSize: "16px",
  titleMaxLength: 34,
  messageFontSize: "13px",
  messageMaxLength: 400,
  buttonFontSize: "14px",
  buttonMaxLength: 34,
  cssAnimation: !0,
  cssAnimationDuration: 360,
  cssAnimationStyle: "fade",
  success: {
    svgColor: "#00b462",
    titleColor: "#1e1e1e",
    messageColor: "#242424",
    buttonBackground: "#00b462",
    buttonColor: "#fff"
  },
  failure: {
    svgColor: "#f44336",
    titleColor: "#1e1e1e",
    messageColor: "#242424",
    buttonBackground: "#f44336",
    buttonColor: "#fff"
  },
  warning: {
    svgColor: "#f2bd1d",
    titleColor: "#1e1e1e",
    messageColor: "#242424",
    buttonBackground: "#f2bd1d",
    buttonColor: "#fff"
  },
  info: {
    svgColor: "#00bcd4",
    titleColor: "#1e1e1e",
    messageColor: "#242424",
    buttonBackground: "#00bcd4",
    buttonColor: "#fff"
  }
});

// or
Notiflix.Report.Success('Title','Success Message','Button Text');
Notiflix.Report.Failure('Title','Failure Message','Button Text');
Notiflix.Report.Warning('Title','Warning Message','Button Text');
Notiflix.Report.Info('Title','Info Message','Button Text');

// with a callback
Notiflix.Report.Success(
  'Success Title',
  'Success Message',
  'Button Text',
function(){
  // callback
});

Create a loading indicator.

Notiflix.Loading.Init({
  ID: "NotiflixLoadingWrap",
  className: "notiflix-loading",
  zindex: 4e3,
  backgroundColor: "rgba(0,0,0,0.8)",
  rtl: !1,
  useGoogleFont: !0,
  fontFamily: "Quicksand",
  cssAnimation: !0,
  cssAnimationDuration: 400,
  clickToClose: false,
  customSvgUrl: null,
  svgSize: "80px",
  svgColor: "#00b462",
  messageID: "NotiflixLoadingMessage",
  messageFontSize: "15px",
  messageMaxLength: 34,
  messageColor: "#dcdcdc"
});

// or
Notiflix.Loading.Standard();
Notiflix.Loading.Hourglass();
Notiflix.Loading.Circle();
Notiflix.Loading.Arrows();
Notiflix.Loading.Dots();
Notiflix.Loading.Pulse();

// with custom loading text
Notiflix.Loading.Standard('Loading...');

// remove
Notiflix.Loading.Remove();

// remove after delay
Notiflix.Loading.Remove(2000);


// use a custom loading spinner
Notiflix.Loading.Init({
  customSvgUrl:'icon.svg', 
  svgSize:'80px'
}); 
Notiflix.Loading.Custom();

Create a block style loading indicator that can be used to block or unblock elements to prevents user’s actions during the process (AJAX etc.) without locking the browser or the other elements.

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

// With message
Notiflix.Block.Standard('.block-this-element', 'Loading...');
Notiflix.Block.Hourglass('.my-element', 'Processing...');N
otiflix.Block.Circle('div#Modal', 'Please wait...');

// Without message
messageNotiflix.Block.Arrows('div#PopUp');
Notiflix.Block.Dots('table#MyTable');
Notiflix.Block.Pulse('.report-wrapper');

// Remove
Notiflix.Block.Remove('div#Modal');
Notiflix.Block.Remove('div#Modal', 600);

Global settings.

Notiflix.Notify.Init({
  wrapID: "NotiflixNotifyWrap",
  width: "280px",
  position: "right-top",
  distance: "10px",
  opacity: 1,
  borderRadius: "5px",
  rtl: !1,
  timeout: 3e3,
  messageMaxLength: 110,
  backOverlay: !1,
  backOverlayColor: "rgba(0,0,0,0.5)",
  ID: "NotiflixNotify",
  className: "notiflix-notify",
  zindex: 4001,
  useGoogleFont: !0,
  fontFamily: "Quicksand",
  fontSize: "13px",
  cssAnimation: !0,
  cssAnimationDuration: 400,
  cssAnimationStyle: "fade",
  closeButton: !1,
  useIcon: !0,
  useFontAwesome: !1,
  fontAwesomeIconStyle: "basic",
  fontAwesomeIconSize: "34px",
  plainText: true,
  showOnlyTheLastOne: false,
  success: {
    background: "#00b462",
    textColor: "#fff",
    childClassName: "success",
    notiflixIconColor: "rgba(0, 0, 0, 0.25)",
    fontAwesomeClassName: "fas fa-check-circle",
    fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"
  },
  failure: {
    background: "#f44336",
    textColor: "#fff",
    childClassName: "failure",
    notiflixIconColor: "rgba(0, 0, 0, 0.2)",
    fontAwesomeClassName: "fas fa-times-circle",
    fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"
  },
  warning: {
    background: "#f2bd1d",
    textColor: "#fff",
    childClassName: "warning",
    notiflixIconColor: "rgba(0, 0, 0, 0.2)",
    fontAwesomeClassName: "fas fa-exclamation-circle",
    fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"
  },
  info: {
    background: "#00bcd4",
    textColor: "#fff",
    childClassName: "info",
    notiflixIconColor: "rgba(0, 0, 0, 0.2)",
    fontAwesomeClassName: "fas fa-info-circle",
    fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"
  }
});

Previews:

Notiflix Alert

Notiflix Alert

Notiflix Report

Notiflix Report

Notiflix Confirm

Notiflix Confirm

Notiflix Loading

Notiflix Loading

Changelog:

v2.1.3 (04/08/2020)

  • Changed: Code Review.

v2.1.2 (02/29/2020)

  • Bugfix

v2.1.0 (02/28/2020)

  • Added: Universal Module Definition.

v2.0.0 (02/08/2020)

  • Added new module Notiflix.Block, which can be used to block or unblock elements to prevents users actions during the process (AJAX etc.) without locking the browser or the other elements.
  • Added: The “clickToClose” option added to the “Notiflix.Notify.*” module.

09/18/2019

  • v1.9.1: Changed: Code Review.

09/16/2019

  • v1.9.0: Changed: Code Review.

07/31/2019

  • v1.8.0: Added: The “showOnlyTheLastOne” option added to the “Notiflix Notify” module.

07/18/2019

  • v1.7.2: Added: Unminified package published.

07/02/2019

  • v1.7.1: Changed: Character encoding UTF-8 without BOM.

07/02/2019

  • v1.7.0: Added: An optional callback function can be used with Deny Button in “Notiflix Confirm” module.

06/14/2019

  • v1.6.0: Added: All modules can be used even if they didn’t initialized. The first call will initialize the module once.

05/06/2019

  • v1.5.0: Fixed: When the “useGoogleFont” option set as “false”; the “fontFamily” option was being ineffective.

04/26/2019

  • v1.4.0

04/13/2019

  • v1.3.0: Added: The “plainText” options added to “Notiflix Notify” and “Notiflix Confirm” modules.

You Might Be Interested In:


One thought on “Elegant Notification Popup JavaScript Library – Notiflix

Leave a Reply