Notiflix is a JavaScript library for client-side non-blocking notifications

Notiflix | a JavaScript library for client-side non-blocking notifications.

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

Current Version

2.3.3 *

(A) Install and Import

(React, Angular, Next.js etc.)

Install

npm

npm i notiflix

yarn

yarn add notiflix

Import

// all modules
import Notiflix from "notiflix";

// one by one
import { Notify, Report, Confirm, Loading, Block } from "notiflix";

(B) Add an HTML

CSS and JS

<link rel="stylesheet" href="dist/notiflix-2.3.3.min.css" />

<script src="dist/notiflix-2.3.3.min.js"></script>

or only JS (All in One - Internal CSS)

<script src="dist/notiflix-aio-2.3.3.min.js"></script>

Usage

1- Notify Module

/*
* @param1 {string}: Required, message text in String format.
*
* @param2 {function | Object}: Optional, a callback function when the notification element has been clicked. Or, extend the initialize options with new options for each notification element.
*
* @param3 {Object}: Optional, extend the initialize options with new options for each notification element (if the second parameter is a callback function).
*/

// e.g. Only message
Notiflix.Notify.Success('Success message text');

Notiflix.Notify.Failure('Failure message text');

Notiflix.Notify.Warning('Warning message text');

Notiflix.Notify.Info('Info message text');

// e.g. Message with a callback
Notiflix.Notify.Success(
  'Click Me',
  function(){
    // callback
  },
);

// e.g. Message with the new options (v2.3.1 and the next versions)
Notiflix.Notify.Success(
  'Click Me',
  {
    timeout: 6000,
  },
);

// e.g. Message with callback, and the new options (v2.3.1 and the next versions)
Notiflix.Notify.Success(
  'Click Me',
  function(){
    // callback
  },
  {
    timeout: 4000,
  },
);

––----–----–----–----–----––

2- Report Module

/*
* @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 when the button element has been clicked. Or, extend the initialize options with new options for each element.
*
* @param5 {Object}: Optional, extend the initialize options with new options for each element. (if the second parameter is 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(){
    // callback
  },
);

// e.g. With the new options (v2.3.1 and the next versions)
Notiflix.Report.Success(
  'Title',
  'Message',
  'Button Text',
  {
    width: '360px',
    svgSize: '120px',
  },
);

// e.g. With the new options, and callback (v2.3.1 and the next versions)
Notiflix.Report.Success(
  'Title',
  'Message',
  'Button Text',
  function(){
    // callback
  },
  {
    width: '360px',
    svgSize: '120px',
  },
);

––----–----–----–----–----––

3- Confirm Module

/*
* @param1 {string}: Required, title text in String format.
* @param2 {string}: Required, message text in String format.
* @param3 {string}: Required, ok button text in String format.
* @param4 {string}: Optional, cancel button text in String format.
* @param5 {function}: Optional, callback function when the ok button element clicked.
* @param6 {function}: Optional, callback function when the cancel button element clicked.
*/

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

// e.g. with callback
Notiflix.Confirm.Show(
  'Title',
  'Message',
  'Ok Button Text',
  'Cancel Button Text',

  // ok button callback
  function(){
    // codes...
  },

  // cancel button callback
  function(){
    // codes...
  },
);

4- Loading Module

/*
* Only Loading Indicator
*/
Notiflix.Loading.Standard();
Notiflix.Loading.Hourglass();
Notiflix.Loading.Circle();
Notiflix.Loading.Arrows();
Notiflix.Loading.Dots();
Notiflix.Loading.Pulse();

/*
* Loading Indicator with a message
* @param1 {string}: Optional, message text in String format.
*/
Notiflix.Loading.Standard('Loading...');

/*
* Change the message text anytime
* @param1 {string}: Required, message text in String format.
*/
Notiflix.Loading.Change('Loading %20');

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

/*
* Remove after delay - e.g. 600ms
* @param1 {number}: Required, number as millisecond.
*/
Notiflix.Loading.Remove(600);

// Custom Loading Indicator: Init a custom SVG Icon
Notiflix.Loading.Init({
  customSvgUrl: 'https://www.notiflix.com/dir/icon.svg',
  svgSize: '80px',
  // etc...
});

// Custom Loading Indicator: Use with custom SVG Icon
Notiflix.Loading.Custom();

// Custom Loading Indicator: Use with custom SVG Icon and a message
Notiflix.Loading.Custom('Loading...');

5- Block Module

Notiflix Block module 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.

Block:

/*
* @param1 {string}: Required, Select the element(s) to block. (ID or Class)
* @param2 {string}: Optional, Can also be added a message.
*/

// Only indicator
Notiflix.Block.Standard('.element');
Notiflix.Block.Hourglass('.element');
Notiflix.Block.Circle('.element');
Notiflix.Block.Arrows('.element');
Notiflix.Block.Dots('.element');
Notiflix.Block.Pulse('.element');

// With a message
Notiflix.Block.Standard('.selector', 'Loading...');

Unblock:

/*
* @param1 {string}: Required, Select the element(s) to unblock. (ID or Class)
* @param2 {number}: Optional, Unblock after a delay.
*/

// Unblock selected element(s) immediately
Notiflix.Block.Remove('.selector');

// Unblock selected element(s) after a delay (e.g. 600 milliseconds)
Notiflix.Block.Remove('.selector', 600);

Initialize (optional)

Notiflix.*.Init function can be used if wanted to be used with custom settings.

// 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 function for a specific page or event.

// e.g. Merge the Notify Module initialize function with some new options
Notiflix.Notify.Merge({
  width: '300px',
  // ...
});

Notiflix Notify Module: Default Options

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

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)',
  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
  },
});

Notiflix Confirm Module: Default Options

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',
});

Notiflix Loading Module: Default Options

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',
});

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,
  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',
});

Download Details:

Author: notiflix

Live Demo: https://www.notiflix.com/

GitHub: https://github.com/notiflix/Notiflix

#javascript #programming