javascript-alert v1.1.4

javascript class to alert message

• Simple
• Easy to use
• Small size

screenshot

Installation

npm i javascript-alert

To use

import {Alert} from "javascript-alert";

new Alert({
  text: 'Hello World !!',
});

What this class can do

• Sending alerts
• Choose between a range of alert severity
• Set a time to hide the alert
• Keep the alert when the mouse cursor is fixed on it
• The ability to add a link when clicking on the alert
• The possibility of adding a function that works when clicking on the alert
• Control where alert appear
• Executing a function after the alert ends

options

option (location)

• 'tc' => top center

• 'tr' => top right

• 'tl' => top left

• 'bc' => bottom center

• 'br' => bottom right

• 'bl' => bottom left

option (severity)

• 'success'

• 'info'

• 'warn'

• 'error'

option (clickUrl) how to use

new Alert({
  text: 'Hello World !!',
  severity: 'info',
  clickUrl: 'https://example.com'
})

option (clickFun) how to use

new Alert({
  text: 'Hello World !!',
  severity: 'info',
  clickFun: function(){
    console.log('Hello World !!');
  }
})

option (after) how to use

new Alert({
  text: 'Hello World !!',
  severity: 'info',
  after: function(){
    console.log('end alert..');
  }
})

style

change style

new Alert({
  text: 'Hello World !!',
  severity: 'info',
  style:{
    width: '200px',
    textAlign : 'left'
  }
})

• If the style is outside the table above a new style can be added via

const new_alert = new Alert({
  text: 'Hello World !!',
  severity: 'warn',
});

 new_alert.alertItem.style.fontSize = '18px';
 new_alert.alertItem.style.fontFamily = 'any font';

use in vue js

• call once and make its functionality available throughout your Vue application without explicitly calling it in each component, you can achieve this by creating a Vue plugin.

• make javascript-alert.js and put

import { Alert } from "javascript-alert";
export default {
  install: function (app) {
    app.config.globalProperties.$alert = Alert;
  },
};

• in main.js

import { createApp } from "vue";
import App from "./App.vue";
import alertMessage from "@/your-path/javascript-alert.js";

createApp(App).use(alertMessage).mount("#app");

• now you can use alert in any component

new this.$alert({
  text: 'Hello World !!'
});