Notiflix for React

Notiflix for React

Notiflix is ready to use in React. Examples of import, initialize and use are below.

get Notiflix React on

GitHub NPM Yarn

Notiflix is fully customizable. You may visit the Documentation page to learn how.

Install Notiflix

You can install Notiflix React with NPM or Yarn.



npm i notiflix-react


yarn add notiflix-react

Import Notiflix

You have to import Notiflix React to your project.


Import All In One (Internal CSS)

import React, { Component } from "react"; ... ... import Notiflix from "notiflix-react"; ...

Or import CSS and JS separately

import React, { Component } from "react"; ... ... import "notiflix-react/dist/notiflix-react-X.X.X.css"; import Notiflix from "notiflix-react/dist/notiflix-react-X.X.X"; ...

Initialize Notiflix Modules

You have to initialize the modules you want to use. Notiflix includes 4 types of modules: Notify, Report, Confirm, and Loading.

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

Use Notiflix

Usage examples of Notiflix are as below. Notiflix includes 4 types of modules: Notify, Report, Confirm, and Loading.

// 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('Click Me', 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', 'Message', 'Button Text', function(){ // Callback console.log('Notiflix!'); } ); // Notiflix Confirm Notiflix.Confirm.Show( 'Notiflix Confirm', 'Do you agree with me?', 'Yes' ); // Notiflix Confirm with a callback. Notiflix.Confirm.Show( 'Notiflix Confirm', 'Do you agree with me?', 'Yes', 'No', 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);

Notiflix uses cookies to personalise content and adverts and to analyse traffic.

Learn More I Accept

Share Notiflix

Buy me a coffee