Report

Notiflix Report module can be used to show extended notifications that contain a title, description, and button(with a callback function). This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".

(A) Import as a Module

import { Report } from 'notiflix/build/notiflix-report-aio';

(B) Add to an HTML page (Global)

(B1) Report Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-report-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>

Playground

Report.success();

Options
@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 that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.success('Notiflix Success','"Do not try to become a person of success but try to become a person of value." <br/><br/>- Albert Einstein','Okay',);
success
Notiflix Success

"Do not try to become a person of success but try to become a person of value."

- Albert Einstein

Demo

A title, description, and button text can be typed for the demonstration.

Report.success('','','',);

Report.failure();

Options
@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 that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.failure('Notiflix Failure','"Failure is simply the opportunity to begin again, this time more intelligently." <br/><br/>- Henry Ford','Okay',);
failure
Notiflix Failure

"Failure is simply the opportunity to begin again, this time more intelligently."

- Henry Ford

Demo

A title, description, and button text can be typed for the demonstration.

Report.failure('','','',);

Report.warning();

Options
@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 that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.warning('Notiflix Warning','"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny." <br/><br/>- Mustafa Kemal Ataturk','Okay',);
warning
Notiflix Warning

"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny."

- Mustafa Kemal Ataturk

Demo

A title, description, and button text can be typed for the demonstration.

Report.warning('','','',);

Report.info();

Options
@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 that will be called when the button element has been clicked. Or, extending the initialize options with the new options for each notification element.@param5 {Object}: Optional, extending the initialize options with new the options for each notification element. (If the fourth parameter has been already used for a callback function.)Report.info('Notiflix Info','"Knowledge rests not upon truth alone, but upon error also." <br/><br/>- Carl Gustav Jung','Okay',);
info
Notiflix Info

"Knowledge rests not upon truth alone, but upon error also."

- Carl Gustav Jung

Demo

A title, description, and button text can be typed for the demonstration.

Report.info('','','',);

Callback Function

A callback function can be added as the fourth parameter. The callback function can be used for all types of notifications.

Report.success('Notiflix','Be brave, take the hill, but first answer that question: "What’s my hill?"','Alert',() => {alert('');},);

Extending the Options

Extending the initialize options with the new options for each notification element. An "options" object can be added as the fourth parameter. In addition, it has to be the fifth parameter if the fourth parameter has been already used for a callback function.

All Options
Report.success('Title','Message','Button',{svgSize: '42px',messageMaxLength: 1923,plainText: false,},);