Nextjs React Notification Alert

Pro Component

A beautiful, responsive, customizable, accessible replacement for Javascript’s popup boxes.

Usage

CSS

In order to use this plugin on your page you will need to import the following styles inside your index.js:

// plugins styles from node_modules
import "react-notification-alert/dist/animate.css";

Example

import React from "react";
// react plugin for creating notifications over the dashboard
import NotificationAlert from "react-notification-alert";
// reactstrap components
import {
  Button,
} from "reactstrap";

class Notifications extends React.Component {
  notify = place => {
    let options = {
      place: place,
      message: (
        <div className="alert-text">
          <span className="alert-title" data-notify="title">
            {" "}
            Bootstrap Notify
          </span>
          <span data-notify="message">
            Turning standard Bootstrap alerts into awesome notifications
          </span>
        </div>
      ),
      type: "default",
      icon: "ni ni-bell-55",
      autoDismiss: 7
    };
    this.refs.notificationAlert.notificationAlert(options);
  };
  render() {
    return (
      <>
        <div className="rna-wrapper">
          <NotificationAlert ref="notificationAlert" />
        </div>
        <Button
          color="default"
          onClick={() => this.notify("tl")}
        >
          Top Left
        </Button>
        <Button
          color="default"
          onClick={() => this.notify("tc")}
        >
          Top Center
        </Button>
        <Button
          color="default"
          onClick={() => this.notify("tr")}
        >
          Top Right
        </Button>
        <Button
          color="default"
          onClick={() => this.notify("bl")}
        >
          Bottom Left
        </Button>
        <Button
          color="default"
          onClick={() => this.notify("bc")}
        >
          Bottom Center
        </Button>
        <Button
          color="default"
          onClick={() => this.notify("br")}
        >
          Bottom Right
        </Button>
      </>
    );
  }
}

export default Notifications;

Colors

import React from "react";
// react plugin for creating notifications over the dashboard
import NotificationAlert from "react-notification-alert";
// reactstrap components
import {
  Button,
} from "reactstrap";

class Notifications extends React.Component {
  notify = type => {
    let options = {
      place: "tc",
      message: (
        <div className="alert-text">
          <span className="alert-title" data-notify="title">
            {" "}
            Bootstrap Notify
          </span>
          <span data-notify="message">
            Turning standard Bootstrap alerts into awesome notifications
          </span>
        </div>
      ),
      type: type,
      icon: "ni ni-bell-55",
      autoDismiss: 7
    };
    this.refs.notificationAlert.notificationAlert(options);
  };
  render() {
    return (
      <>
        <div className="rna-wrapper">
          <NotificationAlert ref="notificationAlert" />
        </div>
        <Button
          color="default"
          onClick={() => this.notify("default")}
        >
          Default
        </Button>
        <Button color="info" onClick={() => this.notify("info")}>
          Info
        </Button>
        <Button
          color="success"
          onClick={() => this.notify("success")}
        >
          Success
        </Button>
        <Button
          color="warning"
          onClick={() => this.notify("warning")}
        >
          Warning
        </Button>
        <Button color="danger" onClick={() => this.notify("danger")}>
          Danger
        </Button>
      </>
    );
  }
}

export default Notifications;

Props

Please check the Official React-Notification-Alert Github Repository for more tips and tricks.