Swalt.js
An alternate Javascript library to show awesome alerts on your app
Installation
Swalt can be used either by CDN or by NPM. CDNs are available in raw as well as minified version.
By NPM
$ npm install swalt
Then, simply import it into your application:
import swalt from "swalt";
By CDN
Just place one of the following script either in your head or body.
<script src="https://rawcdn.githack.com/codeninja02/swalt/97a4a2eb9ac34bc10c420083dfd999bb52c7c254/swalt.js"></script>
Copy script
<script src="https://rawcdn.githack.com/codeninja02/swalt/97a4a2eb9ac34bc10c420083dfd999bb52c7c254/swalt.min.js"></script>
Copy minified script
Usage
Swalt provides some beautiful templates for you to display the alert with input, icon, title and with different themes.
Basic Swalt
swalt ( "Hello World! This is a sample swalt template." ) ;
Swalt with Input [boolean]
You can also change the default value of the input by passing the argument defaultValue [string]. The value of the placeholder can be changed by passing the argument inputPlaceholder [string].
swalt ( "Hello World! This is a sample swalt template.", {
input: true
} ) ;
Swalt with Icon [boolean]
swalt ( "Hello World! This is a sample swalt template.", {
showIcon: true
} ) ;
Swalt in Dark Mode [string]
This argument only accepts value dark and light.
swalt ( "Hello World! This is a sample swalt template.", {
mode: "dark"
} ) ;
Advanced Examples
Here are some advanced references and events which can be used with swalt.
Swalt with Custom Title [string]
Just replace My Custom Title with your own desired title to set a custom title for the swalt.
swalt ( "Hello World! This is a sample swalt template.", {
title: "My Custom Title"
} ) ;
Swalt with Custom Button [string]
Just replace My Custom Button with your own desired text for the "Close" Button.
swalt ( "Hello World! This is a sample swalt template.", {
btnValue: "My Custom Button"
} ) ;
References
Get reference to the swalt element by the swaltRef object. Below is a given table to get properties of the swaltRef object -
| Property |
Type |
Description |
| swaltRef.element |
Object |
Gets input element of the swalt |
| swaltRef.value |
String |
Gets value of the swalt |
| swaltRef.status |
Boolean |
Gets status of the swalt if it is open or closed |
Events
There are also events to indicate if an action happens to the swalt. The events can be passed to the swaltRef.element object.
| Event |
Description |
| swaltBtnClicked |
Swalt "Close" button clicked |
| swaltClosed |
Swalt Closed |
Example on Event -
swaltRef.element.addEventListener ( "swaltBtnClicked", function (e) {
console.log( swaltRef.value );
} ) ;
About
Swalt was originally developed by Utsav Prasad as a open source lightweight replacement for default javascript alerts. Swalt makes popup messages easier and prettier.
