react-notification-modal

A delightful, easy to use and highly configurable component to help you notify your users out of the box. Specially for the server side exceptions, messages and Login Modal.

Install

npm install --save react-notification-modal

Usage

import React, { Component } from 'react'
 
import Notifiction from 'react-notification-modal'
import 'react-notification-modal/dist/index.css'
 
class Example extends Component {
  render() {
    return <Notifiction />
  }
}

SASS

SASS files are located in react-notifications-modal/dist

Render react-notification-modal at the top of your application so that it does not conflict with other absolutely positioned DOM elements.

const App = () => {
  return (
    <div className="app-container">
      <ReactNotification />
      <Application />
    </div>
  )
};

Import store where needed - will be used to access addNotification and removeNotification API methods

import { store } from 'react-notification-modal';

Then call addNotification and watch the magic happens

store.addNotification({
  title: "Exception!",
  status: 500,
  exception: "abdulwhhabkhan@react-notification-modal",
  //info: <Login />
  type: "success",
});

axios

Add axios.interceptors to globally handle errors.

import { store } from 'react-notification-modal';
 
axios.interceptors.response.use(response => {
    return response;
}, err => {
    return new Promise((resolve, reject) => {
        const ignoreCodes = [422]
        if(err && err.response && err.response.status > 400 && ignoreCodes.indexOf(err.response.status) === -1){
            const response = err.response
            exception.addException({
                status: response.status,
                message: response.statusText,
                info: JSON.stringify(response.data, null, 2),
            })
        }
 
        throw err
 
    });
});