alert-notify
v1.0.3
Published
Alert Notification for Javascript, Can be used anywhere.
Downloads
4
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.