artmeet / notiflix Goto Github PK

yarn add notiflix

npm i notiflix

// all modules
import Notiflix from "notiflix";

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

/*
* @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
Notiflix.Notify.success(
  'Click Me',
  {
    timeout: 6000,
  },
);

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

/*
* @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
Notiflix.Report.success(
  'Title',
  'Message',
  'Button Text',
  {
    width: '360px',
    svgSize: '120px',
  },
);

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

/*
* @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.
* @param7 {Object}: Optional, extend the initialize options with new options for each confirm box.
*/

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

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

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

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

  // extend the init options for this confirm box
  {
    width: '320px',
    borderRadius: '8px',
    // etc...
  },
);

/*
* @param1 {string}: Required, the title text in String format.
* @param2 {string}: Required, the question text in String format.
* @param3 {string}: Required, the answer text in String format.
* @param4 {string}: Required, the ok button text in String format.
* @param5 {string}: Optional, the cancel button text in String format.
* @param6 {function}: Optional, a callback function when the ok button element clicked after the correct answer.
* @param7 {function}: Optional, a callback function when the cancel button element clicked.
* @param8 {Object}: Optional, extend the initialize options with new options for each confirm box.
*/

Notiflix.Confirm.ask(
  'Where is Padmé?',
  'Is she safe? Is she all right?',
  'It seems, in your anger, you killed her.',
  'Answer',
  'Cancel',
  function(){
    alert('NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!');
    // codes...
  },
  function(){
    // codes...
  },
  {
    // extend the init options for this confirm box
  },
);

/*
* @param1 {string | Object}: Optional, message text in String format. Or, extend the initialize options with new options for each loading indicator.
* @param2 {Object}: Optional, extend the initialize options with new options for each loading indicator (if the first parameter is a string message text).
*/

// 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
Notiflix.Loading.standard('Loading...');


// Only Loading indicator with the new options
Notiflix.Loading.standard(
  {
    svgSize: '19px',
  },
);

// Loading indicator with a message, and the new options
Notiflix.Loading.standard(
  'Loading...',
  {
    svgSize: '23px',
  },
);

/*
* @param1 {string}: Required, message text in String format.
*/

// Change the message text (if an indicator exists)
Notiflix.Loading.change('Loading %20');

/*
* @param1 {number}: Optional, number as millisecond.
*/

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

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

// Initialize with a custom SVG Icon (default value is null)
Notiflix.Loading.init({
  customSvgUrl: 'https://www.notiflix.com/dir/icon.svg',
});

// Only Customized Loading indicator
Notiflix.Loading.custom();

// Customized Loading indicator with a message
Notiflix.Loading.custom('Loading...');

// And the other functionalities (Change, Remove...)

/*
* @param1 {string}: Required, Select the element(s) to block. (ID or Class)
* @param2 {string | Object}: Optional, message text in String format. Or, extend the initialize options with new options for each block element.
* @param3 {Object}: Optional, extend the initialize options with new options for each block element (if the second parameter is a string message text).
*/

// 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');

// Indicator with a message
Notiflix.Block.standard('.selector', 'Loading...');


// Only indicator with the new options
Notiflix.Block.standard(
  '.selector',
  {
    svgSize: '18px',
  },
);

// Indicator with a message, and the new options
Notiflix.Block.standard(
  '.selector',
  'Loading...',
  {
    svgSize: '81px',
  },
);

/*
* @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);

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

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

Notiflix.Notify.init({
  width: '280px',
  position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' - '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,
  pauseOnHover: true,

  ID: 'NotiflixNotify',
  className: 'notiflix-notify',
  zindex: 4001,
  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)',
  },

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

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

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

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

  failure: {
    svgColor: '#ff5549',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#ff5549',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(255,85,73,0.2)',
  },

  warning: {
    svgColor: '#eebf31',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#eebf31',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(238,191,49,0.2)',
  },

  info: {
    svgColor: '#26c0d3',
    titleColor: '#1e1e1e',
    messageColor: '#242424',
    buttonBackground: '#26c0d3',
    buttonColor: '#fff',
    backOverlayColor: 'rgba(38,192,211,0.2)',
  },
});

Notiflix.Confirm.init({
  className: 'notiflix-confirm',
  width: '300px',
  zindex: 4003,
  position: 'center', // 'center' - 'center-top' - 'center-bottom' - 'right-top' - 'right-center' - 'right-bottom' - 'left-top' - 'left-center' - 'left-bottom'
  distance: '10px',
  backgroundColor: '#f8f8f8',
  borderRadius: '25px',
  backOverlay: true,
  backOverlayColor: 'rgba(0,0,0,0.5)',
  rtl: 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.init({
  className: 'notiflix-loading',
  zindex: 4000,
  backgroundColor: 'rgba(0,0,0,0.8)',
  rtl: 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.init({
  querySelectorLimit: 200,
  className: 'notiflix-block',
  position: 'absolute',
  zindex: 1000,
  backgroundColor: 'rgba(255,255,255,0.9)',
  rtl: false,
  fontFamily: 'Quicksand',
  cssAnimation: true,
  cssAnimationDuration: 300,
  svgSize: '45px',
  svgColor: '#383838',
  messageFontSize: '14px',
  messageMaxLength: 34,
  messageColor: '#383838',
});