Skip to content
Notiflix is a pure JavaScript library for client-side non-blocking notifications that makes your web projects much better.
Branch: master
Clone or download
furcan Version 1.5.0 Released
Version 1.5.0 Released
Latest commit 5e3f4e6 May 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Version 1.5.0 Released May 6, 2019
github-assets Version 1.3.0 Apr 12, 2019
previous-versions Version 1.5.0 Released May 6, 2019
LICENSE Update LICENSE Mar 4, 2019
README.md Version 1.5.0 Released May 6, 2019
ReleaseNotes.md
package.json

README.md

Notiflix

Notiflix

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

Notiflix is a pure JavaScript library for client-side non-blocking notifications that makes your web projects much better. (Don't need jQuery)

Current Version

1.5.0 *

Website

https://www.notiflix.com

Documentation

https://www.notiflix.com/documentation

Install

npm
npm i notiflix
yarn
yarn add notiflix
Demo

Basic Usage
CSS and JS

1.1- <link rel="stylesheet" href="notiflix-1.5.0.min.css" />

1.2- <script src="notiflix-1.5.0.min.js"></script>

or only JS (Internal CSS)

1- <script src="notiflix-aio-1.5.0.min.js"></script>

------

2- Init

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

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

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

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

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

------

3.1- Use the Notify Module

// You can type your text in String format.

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. with a callback
Notiflix.Notify.Success('Click Me', function(){
  // callback
});

------

3.2- Use the Report Module

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

------

3.3- Use the Confirm Module

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

// e.g. with a callback
Notiflix.Confirm.Show(
  'Title',
  'Message',
  'Ok Button Text',
  'Cancel Button Text',
function(){
  // callback
});

------

3.4- Use the Loading Module

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

// Loader with a message
Notiflix.Loading.Standard('Loading...');

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

// Remove after delay - e.g. 600ms
Notiflix.Loading.Remove(600);


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

// Use the custom SVG Icon
Notiflix.Loading.Custom();



Notiflix Notify Module: Default Options

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

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

  plainText: true, // New Option: @1.3.0 and next versions

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

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

Notiflix Confirm Module: Default Options

Notiflix.Confirm.Init({
  className: 'notiflix-confirm',
  width: '280px',
  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: true,
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationStyle: 'fade', // 'zoom' - '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',

  plainText: true, // New Option: @1.3.0 and next versions

});

Notiflix Loading Module: Default Options

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



Copyright

Copyright © 2019 Notiflix

License

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

You can’t perform that action at this time.