2.0.7 • Published 5 years ago

@davistran86/notification v2.0.7

Weekly downloads
30
License
MIT
Repository
github
Last release
5 years ago

Simple Notification v2

npm.io

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.

PredefinedDefaultExample
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: "..."
});
TypeInfoExample
String / ComponentDisplay content with predefined title or no title based on usage.message.success("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
ObjectDisplay 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
});
OptiontypeDefaultInfoExample
widthstring400pxpx is the best choice. Other measurements can be used but not working correctlymessage.open(content,{ width: "400px" })
typestringnull when used with message.open()Value: success, error, warning, infomessage.open(content,{ type: "success" })
durationnumber5000Auto close after 5000ms, use 0 to prevent the notification auto closemessage.open(content, { duration: 3000 })
positionstringtop-rightValue: top-left, top-right, bottom-left, bottom-rightmessage.open(content, { position: "topLeft" })
boldbooleanfalsetype is required to use with this option. false: white background. true: colored background.message.open(content, { type: "error", bold: true })
speednumber200Animation speed when notification appear or exit. Should only use between 150 to 500 for smoother effectmessage.open(content, { speed: 200 })
backgroundColorstring#fffAny CSS background-color format can be usedmessage.open(content, { backgroundColor: "rgb(0, 135, 90)" })
fontColorstringrgb(37,56,88)Any CSS color format can be usedmessage.open(content, { fontColor: "#fff" })
iconColorstringnoneAny CSS color format can be usedmessage.open(content, { iconColor: "#fff" })
iconcomponentnullAny React Component can be used. Should only use by import a svg file as React Component. E.g: import {ReactComponent as Icon} from './icon.svgmessage.open(content, { icon: <Icon/> })
zIndexnumber9999Any number can be usedmessage.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();
2.0.7

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.6

5 years ago

2.0.3

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.26

6 years ago

1.0.25

6 years ago

1.0.24

6 years ago

1.0.23

6 years ago

1.0.22

6 years ago

1.0.20

6 years ago

1.0.19

6 years ago

1.0.18

6 years ago

1.0.17

6 years ago

1.0.16

6 years ago

1.0.15

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago