@davistran86/notification

2.0.7 • Public • Published

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

Package Sidebar

Install

npm i @davistran86/notification

Weekly Downloads

7

Version

2.0.7

License

MIT

Unpacked Size

84.6 kB

Total Files

8

Last publish

Collaborators

  • davistran86