You can install Notiflix React with NPM or Yarn.
1You have to import Notiflix React to your project.
2
import React, { Component } from "react";
...
import Notiflix from "notiflix-react";
...
class YourClass extends Component {
...
componentDidMount() {
...
// Init the module you want to use. e.g. Notify Module
Notiflix.Notify.Init({});
// Or init the module with some options. e.g. Notify Module
Notiflix.Notify.Init({
width:'300px',
position:'right-top',
distance:'15px',
});
...
...
}
...
}
// Notiflix Notify
Notiflix.Notify.Success('Success Message');
Notiflix.Notify.Failure('Failure Message');
Notiflix.Notify.Warning('Warning Message');
Notiflix.Notify.Info('Info Message Text');
// Notiflix Notify with a callback. e.g. Notify Success
Notiflix.Notify.Success( , function(){
// Callback
console.log('Notiflix!');
});
// Notiflix Report
Notiflix.Report.Success('Success Tittle','Success Message','Success Button Text');
Notiflix.Report.Failure('Failure Tittle','Failure Message','Failure Button Text');
Notiflix.Report.Warning('Warning Tittle','Warning Message','Warning Button Text');
Notiflix.Report.Info('Info Tittle','Info Message','Info Button Text');
// Notiflix Report with a callback. e.g. Report Failure
Notiflix.Report.Failure(
'Title',
,
,function(){
// Callback
console.log('Notiflix!');
}
);
// Notiflix Confirm
Notiflix.Confirm.Show(
'Notiflix Confirm',
,
);
// Notiflix Confirm with a callback.
Notiflix.Confirm.Show(
'Notiflix Confirm',
,
,
,function(){
// Callback
console.log('Thank you.');
}
);
// Notiflix Loading
// Only loading indicator
Notiflix.Loading.Standard();
Notiflix.Loading.Hourglass();
Notiflix.Loading.Circle();
Notiflix.Loading.Arrows();
Notiflix.Loading.Dots();
Notiflix.Loading.Pulse();
// Loading indicator with message. e.g. Standard
Notiflix.Loading.Standard('Loading...');
// Remove immediately
Notiflix.Loading.Remove();
// Remove after delay - e.g. 600ms
Notiflix.Loading.Remove(600);