Swalt | Alert

Swalt.js

An alternate Javascript library to show awesome alerts on your app

Show Demo Alert

Integration

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." ) ;

Copy code

Run

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
} ) ;

Copy code

Run

Swalt with Icon [boolean]

A big thanks to Alexandre Chopin for his awesome SweetAlert Warning Icon for the icon.

swalt ( "Hello World! This is a sample swalt template.", {
showIcon: true
} ) ;

Copy code

Run

Swalt in Dark Mode [string]

This argument only accepts value dark and light.

swalt ( "Hello World! This is a sample swalt template.", {
mode: "dark"
} ) ;

Copy code

Run

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"
} ) ;

Copy code

Run

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"
} ) ;

Copy code

Run

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 @Programmer as an open source lightweight replacement for default javascript alerts.

View on Github

View on Npm

Swalt.js

Home

Installation

Usage

Advanced Examples

About

Swalt | My First Library