Elegant Notification Popup JavaScript Library – Notiflix

Category: Javascript , Notification | June 30, 2020
Author: notiflix
Views Total: 128 views
Official Page: Go to website
Last Update: June 30, 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({
  width: '280px',
  position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' && v2.2.0 and the next versions => '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,
  ID: 'NotiflixNotify',
  className: 'notiflix-notify',
  zindex: 4001,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  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: '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)', // v2.2.0 and the next versions
  },
  failure: {
    background: '#ff5549',
    textColor: '#fff',
    childClassName: '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)', // v2.2.0 and the next versions
  },
  warning: {
    background: '#eebf31',
    textColor: '#fff',
    childClassName: '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)', // v2.2.0 and the next versions
  },
  info: {
    background: '#26c0d3',
    textColor: '#fff',
    childClassName: '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)', // v2.2.0 and the next versions
  }
});

// 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({
  className: 'notiflix-confirm',
  width: '300px',
  zindex: 4003,
  position: 'center', // 'center' - 'center-top' -  'right-top' - 'right-bottom' - 'left-top' - 'left-bottom'
  distance: '10px',
  backgroundColor: '#f8f8f8',
  borderRadius: '25px',
  backOverlay: true,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  rtl: false,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationStyle: 'fade', // 'zoom' - 'fade'
  cssAnimationDuration: 300,
  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',
});

// 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({
  className: 'notiflix-report',
  width: '320px',
  backgroundColor: '#f8f8f8',
  borderRadius: '25px',
  rtl: false,
  zindex: 4002,
  backOverlay: true,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  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)', // v2.2.0 and the next versions
  },
  failure: {
    svgColor: '#ff5549',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#ff5549',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(255,85,73,0.2)', // v2.2.0 and the next versions
  },
  warning: {
    svgColor: '#eebf31',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#eebf31',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(238,191,49,0.2)', // v2.2.0 and the next versions
  },
  info: {
    svgColor: '#26c0d3',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#26c0d3',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(38,192,211,0.2)', // v2.2.0 and the next versions
  },
});

// 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({
  className: 'notiflix-loading',
  zindex: 4000,
  backgroundColor: 'rgba(0,0,0,0.8)',
  rtl: false,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationDuration: 400,
  clickToClose: false,
  customSvgUrl: null,
  svgSize: '80px',
  svgColor: '#32c682',
  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({
  querySelectorLimit: 200,
  className: 'notiflix-block',
  position: 'absolute',
  zindex: 1000,
  backgroundColor: 'rgba(255,255,255,0.9)',
  rtl: false,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  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', // can not customizable
  width: '280px',
  position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' && v2.2.0 and the next versions => '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,
  ID: 'NotiflixNotify',
  className: 'notiflix-notify',
  zindex: 4001,
  useGoogleFont: false, // v2.2.0 and the next versions => has been changed as "false"
  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: '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)', // v2.2.0 and the next versions
  },
  failure: {
    background: '#ff5549',
    textColor: '#fff',
    childClassName: '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)', // v2.2.0 and the next versions
  },
  warning: {
    background: '#eebf31',
    textColor: '#fff',
    childClassName: '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)', // v2.2.0 and the next versions
  },
  info: {
    background: '#26c0d3',
    textColor: '#fff',
    childClassName: '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)', // v2.2.0 and the next versions
  },
});

Previews:

Notiflix Alert

Notiflix Alert

Notiflix Report

Notiflix Report

Notiflix Confirm

Notiflix Confirm

Notiflix Loading

Notiflix Loading

Changelog:

v2.3.3 (06/30/2020)

  • Changed: Code Review.
  • Changed: Prefixes for CSS.

v2.3.2 (06/19/2020)

  • Fixed: “Notiflix.Block.*” module, “Remove()” function fixes and improvements for Internet Explorer(10+) compatibility.
  • Changed: “notiflix-aio.js” file has been moved from “src” to “src/all-in-one” folder.

v2.3.1 (06/11/2020)

  • Changed: “Notiflix.Notify.*” module, “callback” and “options” parameters have been changed.
  • Changed: “Notiflix.Report.*” module, “callback” and “options” parameters have been changed.
  • Changed: Code Review.

v2.3.0 (06/11/2020)

  • Changed: “Notiflix.Notify.*” module, CSS animation improvements.

v2.2.1 (06/10/2020)

  • Changed: “Notiflix.Notify.*” module, CSS animation improvements.

v2.2.0 (06/05/2020)

  • Added “Notiflix.Notify.*” and “Notiflix.Report.*” modules;
  • Updated options;
  • Changed: All modules (“Notify”, “Report”, “Confirm”, “Loading”, and “Block”); “useGoogleFont” setting has been changed as “false” to defaultl
  • Changed: Code Review

v2.1.4 (06/03/2020)

  • Changed: Code Review.
  • Changed: Notiflix Confirm module; HTML tag of the message element has been changed from “p” to “div”.

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