A simple alert management system built on top of the native "dialog" HTML tag.
Simply install the package:
npm install alertist
and then import it in your project.
import alertist from 'alertist';
Don't forget to import either the SASS file for styling inside the
src/scss/main.scss
or include the dist/alertist.css
file in your
document.
If you intend not to use this in a framework and instead just want to test
it out in a browser, you can use unpkg
and include the js and css files into
your document.
<link href="https://unpkg.com/alertist/dist/alertist.css" rel="stylesheet">
<script src="https://unpkg.com/alertist/dist/alertist.browser.js"></script>
That's it!
- Supports dragging of the dialog window
- Plenty of customizability
- Function checker before calling okCallback
- Pop out a form into the dialog window
You can customize the dialog styling by overwriting the SASS variables inside the
src/scss/variables.scss
. If you want more customizability, you can always style it
yourself, up to you!
We currently have 2 types of alerts available. This will expand in the future but as of now this is what the package offers.
- Alert
- Confirm
- Form Pullout
Syntax:
// Use it like this:
alertist.alert({
title: 'Title',
text: 'Hello world!',
button: 'Yes', // default: 'OK'
okCallback: () => {},
cancelCallback: () => {},
check: (dialogElement) => { return true }, // Optional
});
Here's the HTML if you want to style this alert type yourself:
dialog.alertist.alertist-confirm
div.alertist-container
div.alertist-header
div.alertist-title
button.alertist-title_close
img
div.alertist-body
div.alertist-footer
button.alertist-footer_button
Syntax:
// Use it like this:
alertist.confirm({
title: 'Title',
text: 'Hello world!',
button: 'Yes', // default: 'OK'
cancel: 'No', // default: 'Cancel'
okCallback: () => {},
cancelCallback: () => {},
check: (dialogElement) => { return true }, // Optional
});
Here's the HTML structure if you want to style this alert type yourself:
dialog.alertist.alertist-confirm
div.alertist-container
div.alertist-header
div.alertist-title
button.alertist-title_close
img
div.alertist-body
div.alertist-footer
button.alertist-footer_button
button.alertist-footer_cancelbutton
Pulls the form created in the DOM and puts it inside a pop-up dialog box.
Syntax:
// Use it like this:
alertist.form({
title: 'Log In to this Website',
target: 'form#login',
submit: false,
okCallback: (e) => {
const form = e.querySelector('form#login');
console.log(form.username, form.password);
},
check: (elem) => {
return new Promise((resolve, reject) => {
alertist.confirm({ // [alertist.confirm] Supports chaining!
text: 'Are you sure you want to log in?',
okCallback: () => {
resolve();
},
cancelCallback: () => {
reject();
},
});
});
},
});
<form id="login">
username: <input placeholder="admin" name="username" /><br>
password: <input placeholder="********" name="password" /><br>
<input type="submit" value="Log In" />
</form>
There are three functions that you can add to the alertist object parameter.
Pretty self explanatory. This function will run when the user clicks on the "OK" button.
This function will run when either the X button, the Cancel button, or the background backdrop gets clicked.
This is a function that will run when the user attempts to click on the "OK" button. If unassigned,
this defaults to a function that returns true
, but you can override this so that you can try doing
some kind of check before the okCallback
function runs. It needs a return statement if assigned, and
will accept either a return true
, return false
, a promise that resolve()
or a promise that
reject()
. If the function receives a false
or a reject()
, the alert box will remain open and will
not close.
Usage:
alertist.confirm({
text: 'Hello world!',
check: ({dialogElement}) => { return true },
});
alertist.confirm({
text: 'Hello world!',
check: ({dialogElement}) => { return false },
});
alertist.confirm({
text: 'Hello world!',
check: ({dialogElement}) => {
return new Promise((resolve, reject) => {
resolve();
});
},
});
alertist.confirm({
text: 'Hello world!',
check: (dialogElement) => {
return new Promise((resolve, reject) => {
reject();
});
},
});
alertist.confirm({
text: 'Hello world!',
check: async (dialogElement) => {
const value = await fetch(`https://example.com/api`)
return value === 'ok' ? true : false;
},
});