creativetimofficial / react-notification-alert

React bootstrap 4 notification alert

React Notification Alert

React Notification Alert is a component made with reactstrap components and React.

Installation

npm install --save react-notification-alert

Usage

You can import react-notification-alert in your application like so:

import NotificationAlert from 'react-notification-alert';

After that, in your component render method add the following line:

<NotificationAlert ref="notificationAlert" zIndex={1031} onClick={() => console.log("hey")} />

We've used ref="notificationAlert" property on the NotificationAlert tag to access this components properties.

Somewhere in your component call notificationAlert(options) function like:

this.refs.notificationAlert.notificationAlert(options);

Styles

Do not forget to import our styles in your project:

import "react-notification-alert/dist/animate.css";

zIndex

If you want to add a special zIndex to the notification, if not, 9999 will be set as default.

onClick

This function will be called when the user clicks on a certain notification.

options parameter

This parameter has to be a javascript object with the following props:

var options = {
    place: ,
    message: ,
    type: ,
    icon: ,
    autoDismiss: ,
    closeButton: ,
    zIndex: ,
}

place

This is where will the notification appear. Can be one of:

1. tl - notification will be rendered in the top-left corner of the screen
2. tc - notification will be rendered in the top-center corner of the screen
3. tr - notification will be rendered in the top-right corner of the screen
4. bl - notification will be rendered in the bottom-left corner of the screen
5. bc - notification will be rendered in the bottom-center corner of the screen
6. br - notification will be rendered in the bottom-right corner of the screen

message

Can be string / node. This is goind to be the message inside the notification.

type

This is the color of the notification and can be one of, according to reactstrap colors for alerts:

1. primary
2. secondary
3. success
4. danger
5. warning
6. info
7. light
8. dark

icon

String used to add an icon to the notification.

autoDismiss

This prop is used to tell the notification after how many seconds to auto close. If is set to a value lower than or equal to 0, then the notification will not auto close.

closeButton

If this prop is set to false, than no close button will render in the notification.

Example code

import React, { Component } from 'react';
import NotificationAlert from 'react-notification-alert';

var options = {};
options = {
    place: 'tl',
    message: (
        <div>
            <div>
                Welcome to <b>Now UI Dashboard React</b> - a beautiful freebie for every web developer.
            </div>
        </div>
    ),
    type: "danger",
    icon: "now-ui-icons ui-1_bell-53",
    autoDismiss: 7
}

class App extends Component {
    myFunc(){
        this.refs.notify.notificationAlert(options);
    }
  render() {
    return (
      <div>
          <NotificationAlert ref="notify" zIndex={9999} onClick={() => console.log("hey")} />
        <button onClick={() => this.myFunc()}>Hey</button>
      </div>
    );
  }
}

export default App;

Dependencies

For this component to work properly you have to have the following libraries installed in your project:

npm install --save reactstrap
npm install --save bootstrap

Bootstrap will require the following:

npm install --save jquery

react-notification-alert's Issues

color doesn't work, showed only normal button and text notification

I got this

instead of this

what did I miss?

Remove icon

When setting options = { icon: undefined} or just leaving icon away, the X-icon is still rendered. How do I disable the item?

Do not clear all timeouts! Clear only your timeouts!

Hi Team! On componentWillOnmount you clear all registered timeouts! But you should clear only that timeouts which was created by your component only! I have several registered timeouts in my other components and they are all cleared by your component (when it unmounts) and this bug breaks a lot of my own logic. Could you pls fix this? Thanks.

Add a callback on dismiss. (Enhancement)

Add a callback to know when the alert is dismiss so we can update states and props later accordingly for async renderings. :)

Error on unmounting with active alerts

Hello Team!
When the component is unmounted and there are some active alerts (not yet dismissed) I got an error below:
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in NotificationAlert (at Sidebar.jsx:72)
in div (at Sidebar.jsx:71)
in Sidebar (at DashboardLayout.jsx:44)
in div (at DashboardLayout.jsx:43)
in DashboardLayout (created by Connect(DashboardLayout))
in Connect(DashboardLayout) (at Routes.js:90)
in Route (at Routes.js:88)
in ProtectedRoute (created by Connect(ProtectedRoute))
in Connect(ProtectedRoute) (at index.js:31)
As I undrestand there are some timeout callbacks pending which should be cleared on component unmounting. Could you pls fix this issue?

onClick() notification

Is there any way to run a function when the notification is clicked??

is this library dead ?

React Compilation failing due to react-notification-alert

./node_modules/react-notification-alert/dist/animate.css 7:0\nModule parse failed: Unexpected token (7:0)\nYou may need an appropriate loader to handle this file type.\n| Copyright (c) 2015 Daniel Eden\n| */\n> .animated {\n| -webkit-animation-duration: 1s;\n| animation-duration: 1s;\n @ ./node_modules/react-notification-alert/dist/index.js 15:0-24\n @ ./pages/dashboard/notifications.jsx\n @ multi ./pages/dashboard/notifications.jsx'

How to used it with redux.

I am using redux and react-hooks.

I have takein reference of issues of function components of this repo already.

I am stuck at this stage.

I want to alert my notification when my error state is changed. I was thinking of calling myfunc in setErros actions.
but then i have to somehow export myfunc from dashboard component where i have write the code.
is there is any other way.

alert.js (action)

import {http,catchasync} from './http'

export const setErrors = (Message) => catchasync( async (dispatch) => {
  dispatch({type:'SET_ERRORS',payload:Message} );

})

export const setSuccess = (Message) => catchasync( async (dispatch) => {
  // dispatch({type:'SET_SUCCESSS',payload:Message} );
})

DashBoard.js (comp)

import React,{useRef,useEffect} from 'react'
import PropTypes from 'prop-types'
import SideBar from '../components/SideBar'
import AdminNavbar from '../components/AdminNavbar'
import routes from '../utils/routes'
import AdminFooter from '../components/AdminFooter'
import { useDispatch,useSelector } from 'react-redux'
import { setErrors } from '../actions/alerts';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";

import { Container } from 'reactstrap';

import argonreact from "../assets/img/brand/argon-react.png";
import NotificationAlert from "react-notification-alert";
import "react-notification-alert/dist/animate.css";

function DashBoard(props) {
  const getRoutes = routes => routes.map(
    (prop, key) =>        
        <Route
          path={'/dashboard' + prop.path}
          exact={prop.exact || false}
          // component={prop.component}
          children={<prop.display />}
          key={key}
        />
      );
      


  // const getBrandText = path => {
  //   for (let i = 0; i < routes.length; i++) {
  //     if (
  //       props.location.pathname.indexOf(
  //         routes[i].layout + routes[i].path
  //       ) !== -1
  //     ) {
  //       return routes[i].name;
  //     }
  //   }
  //   return "Brand";
  // };

  const dispatch = useDispatch();
  const alert = useSelector(state =>{ 
    console.log(state)
    return state.alert})
  
  const notifyEl = useRef(null);

  const myFunc = () => {
    notifyEl.current.notificationAlert(options);
  }
  useEffect(() => {
    // dispatch(setErrors("Hiii"));
    console.log(alert)
    // async function fetchData() {
    //   const { data:api } = await axios.get('/events')
    //   console.log(api.data.paginatedData)
    //   setRows(api.data.paginatedData)
    // }
    // fetchData()
  }, [alert])
  // useEffect(() => {
  //   myFunc()
    
  //   // async function fetchData() {
  //   //   const { data:api } = await axios.get('/events')
  //   //   console.log(api.data.paginatedData)
  //   //   setRows(api.data.paginatedData)
  //   // }
  //   // fetchData()
  // }, [alert])

  var options;
  options = {
    place: 'tr',
    message: (
      <div className="alert-text">
        <span className="alert-title" data-notify="title">
          {JSON.stringify(alert)}
          {alert.msg}
          
        </span>
        <span data-notify="message">
          {/* Turning stan  dard Bootstrap alerts into awesome notifications */}
        </span>
      </div>
    ),
    type: 'warning',
    icon: "ni ni-bell-55",
    autoDismiss: 7
  }
  return (
    <>
    <SideBar 
      routes={routes}
      logo={{
        innerLink: "/dashboard",
        imgSrc: argonreact,
        imgAlt: "..."
      }}
    />



    <div className="main-content" >
      <AdminNavbar brandText="Sap" />
      <NotificationAlert ref={notifyEl} />

      <Switch>
        {getRoutes(routes)}
        {/* <Redirect from="*" to="/admin/index" /> */}
      </Switch>
      <Container fluid>
        <AdminFooter />
      </Container>
      </div>
    </>
  )
}

DashBoard.propTypes = {

}

export default DashBoard

Call NotificationAlert in Functional Component

How do I call this in a functional component in React?

zIndex to small

Hi,

I use Navbar (top) from reactstrap.
If my place notif is in TOP (tl, tc, tr) the z-index of the NavBar is above the notification.
So it's impossible to close it with the across button
To resume:

1. NavBar to : z-index -> 1050
2. Notification : z-index -> 1031

Regarding reactstrap components , is it possible art least to increase the z-index 1031 to 1051?

Thanks

onclose function needed

I was stuck in a weird requirement , where i want to call a function on closing the notification via native close button , is there any way possible as of now , or need to have a seperate close button(cross icon) and do?