react-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" />

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);

options parameter

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

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

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.

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" />
        <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@next
npm install --save bootstrap@4.0.0-beta.2

Bootstrap will require the following:

npm install --save jquery
npm install --save popper.js