@davistran86/notification

Simple Notification v2

Demo

Please visit: https://davistran86.github.io/react-simple-notification/

Credit

Icons from www.flaticon.com

Styles and colors are inspired by Ant Design, Atlaskit

Installation

npm

npm i @davistran86/notification

yarn

yarn add @davistran86/notification

Basic Usage

Simply import the package to your react web app and start using it.

import React from "react";
import ReactDOM from "react-dom";
import message from "@davistran86/notification";

const onSuccess = () => {
  message.success("Lorem ipsum dolor sit amet, consectetur adipiscing elit");
};
function App() {
  return (
    <div className="App">
      <button onClick={onSuccess}>Success</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Font settings

To change font settings, make sure font-family and font-size are set in your css by adding css styles to:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
    "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
}

or

[id^="simple-notification"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
    "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
}

Predefined Notification

Note: All bellow method can be combined with custom content and option for different type of notification.

Predefined	Default	Example
message.open()	White background, no icon, no title.	message.open("Lorem ipsum dolor sit amet")
message.success()	White background and predefined icon and title. Set option { bold: true } for predefined color.	message.success("Lorem ipsum dolor sit amet", { bold: true })
message.error()	White background and predefined icon and title. Set option { bold: true } for predefined color.	message.error("Lorem ipsum dolor sit amet", { bold: true })
message.warning()	White background and predefined icon and title. Set option { bold: true } for predefined color.	message.warning("Lorem ipsum dolor sit amet", { bold: true })
message.info()	White background and predefined icon and title. Set option { bold: true } for predefined color.	message.info("Lorem ipsum dolor sit amet", { bold: true })

Custom Configuration

Notification can be configured as below:

message.success(content, option);

Content

message.success(content);

or

message.success({
  title: "...",
  description: "..."
});

Type	Info	Example
String / Component	Display content with predefined title or no title based on usage.	message.success("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
Object	Display content with custome title and content.	message.success({ title: "Adipiscing at" , description: "Lorem ipsum dolor sit amet" })

Note: description can be a React Component:

message.success({
  title: "...",
  description: <SomeComponent />
});

Option

message.open(content, {
  type: null,
  duration: 5000,
  position: "top-right",
  width: "400px",
  bold: false,
  speed: 200,
  backgroundColor: "#fff",
  fontColor: "rgb(37,56,88)",
  iconColor: "none",
  icon: null,
  zIndex: 9999
});

Option	type	Default	Info	Example
width	string	400px	px is the best choice. Other measurements can be used but not working correctly	message.open(content,{ width: "400px" })
type	string	null when used with message.open()	Value: success, error, warning, info	message.open(content,{ type: "success" })
duration	number	5000	Auto close after 5000ms, use 0 to prevent the notification auto close	message.open(content, { duration: 3000 })
position	string	top-right	Value: top-left, top-right, bottom-left, bottom-right	message.open(content, { position: "topLeft" })
bold	boolean	false	type is required to use with this option. false: white background. true: colored background.	message.open(content, { type: "error", bold: true })
speed	number	200	Animation speed when notification appear or exit. Should only use between 150 to 500 for smoother effect	message.open(content, { speed: 200 })
backgroundColor	string	#fff	Any CSS background-color format can be used	message.open(content, { backgroundColor: "rgb(0, 135, 90)" })
fontColor	string	rgb(37,56,88)	Any CSS color format can be used	message.open(content, { fontColor: "#fff" })
iconColor	string	none	Any CSS color format can be used	message.open(content, { iconColor: "#fff" })
icon	component	null	Any React Component can be used. Should only use by import a svg file as React Component. E.g: import {ReactComponent as Icon} from './icon.svg	message.open(content, { icon: <Icon/> })
zIndex	number	9999	Any number can be used	message.open(content, { zIndex: 10 })

Closing a Notification

Normally a notification can be closed automatically after a specific duration or by clicking on close button. But there is a message.close() method to close the notification in case you need to do so.

Example:

Create the notification

let notification = message.open("Duis aute irure dolor in repre", {
  duration: 0
});

Then close it whenever you want

message.close(notification);

Closing all Notification

All notifications can be closed all at once by using message.closeAll() method.

Example:

Create the notification

message.open("Duis aute irure dolor in repre", {
  duration: 0
});

Then close all notifications whenever you want

message.closeAll();