Elegant Notification Popup JavaScript Library – Notiflix

Category: Javascript , Notification | September 18, 2019
Author: notiflix
Views Total: 681
Official Page: Go to website
Last Update: September 18, 2019
License: MIT

Preview:

Elegant Notification Popup JavaScript Library – Notiflix

Description:

Notiflix is a flexible, powerful and customizable notification popup library which 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: !1,
  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();

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:

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