alert-notify
v1.0.3
Published
Alert Notification for Javascript, Can be used anywhere.
Downloads
11
Readme
Alert Notify
Quick Start
You can use this package in any project that either use React or does not use any framework.
- Install by running
npm install alert-notify
oryarn add alert-notify
. - For React projects: Import
import AlertNotifyContainer from "alert-notify/react/container";
. - For Non React projects: Just add
<div id="alertNotify_main_container"></div>
inside body tag.
In non-React projects, you can import style file wherever you need them. Just ensure that they are added to the project correctly.
Add
<AlertNotifyContainer />
inside your<App />
and import Style fileimport "alert-notify/Style.scss";
if you are using sass,import "alert-notify/style.min.css";
if you are using css only.
Import
import showAlert, { SUCCESS, DEFAULT, ERROR, INFO, WARNING } from "./alert";
.Use this function to show alerts
showAlert(ALERT_TYPE, MESSAGE_HERE);
Valid ALERT_TYPES areSUCCESS
,DEFAULT
,ERROR
,INFO
,WARNING
.showAlert takes 3rd parametre as object with keys
timeout
,icon
andisDismissible
.
{
timeout: 5000, // Time in millisecond, after that time alert will dismiss
icon: icon, // You can use any icon (works well with Font Awesome Icons)
isDismissible: true, // user can dismiss the alert if true
}
Getting started
Usage
import showAlert, {
SUCCESS,
DEFAULT,
ERROR,
INFO,
WARNING,
} from "alert-notify";
import AlertNotifyContainer from "alert-notify/container";
import "alert-notify/Style.scss";
function App() {
return (
<div className="App">
<AlertNotifyContainer />
<button
onClick={() => {
showAlert(SUCCESS, "This is Success Message.");
showAlert(DEFAULT, "This is DEFAULT Message.");
showAlert(ERROR, "This is ERROR Message.");
showAlert(INFO, "This is INFO Message.");
showAlert(WARNING, "This is WARNING Message.");
showAlert(SUCCESS, "Alert with Optional Parameter", {
timeout: 5000,
icon: icon,
isDismissible: true,
});
}}
>
{" "}
Show Alert
</button>
</div>
);
}
export default App;
Example
Alerts
License
The MIT License.