Documentation

SoloAlert is a Lightweight Alert library for displaying awesome custom SoloLearn Alerts. It is Promise based and easy to use with many customizable options.

Including the library:

Its so easy to include SoloAlert.js to your website. Just Copy the following code below and put in the <head></head> of your website and done.

<script src="https://unpkg.com/soloalert" type="text/javascript"></script>

Getting Started:

Solo Alert requires DOM to be loaded to show the alert.
Here's a simple code for an alert with a Title and body text.
Try runing it and see the alert.

SoloAlert.alert({ title:"Title Here", body:"Body Text.", });

Displaying an alert with an Icon.

SoloAlert.alert({ title:"Title Here", body:"Alert With An Icon", icon: "success" });

There are three available icons: success, warning, error. But you can also add your own icons' html to SoloAlert.data_icons and use them in icon parameter.

Displaying an alert with a custom Icon.

SoloAlert.data_icons.logo = '<img src="https://soloalert.js.org/assets/soloalert.svg" alt="SoloAlert Logo" width="150px" height="150px"/>'; SoloAlert.alert({ title:"Title Here", body:"Alert With A Custom Icon", icon: "logo" });

Displaying a Simple Prompt with heading and text.

SoloAlert.prompt({ title:"Title Here", body:"Enter a Number", type: "number" });

Displaying a Prompt Message and Getting the Entered Value.

SoloAlert.prompt({ title:"Title Here", body:"Enter a Number", type: "number" }).then(value => { SoloAlert.alert({ title: "Prompt Output", body: "The Entered Number was " + value }) })

Displaying a Confirm Message.

SoloAlert.confirm({ title:"Title Here", body:"Are you a Cat ?" });

Displaying a Confirm Message. And getting User Choice

SoloAlert.confirm({ title:"Title Here", body:"Are you a Cat ?" }).then(value => { SoloAlert.alert({ title: "User Choice", body: "You Choosed " + value }) })

Displaying an Alert with a Light theme (default is "auto")

SoloAlert.alert({ title:"Title Here", body:"Light Theme.", theme: "light" })

Displaying an Alert with a Dark theme (default is "auto")

SoloAlert.alert({ title:"Title Here", body:"Dark Theme.", theme: "dark" })

Displaying an Alert with Transparency effect is (default is false)

SoloAlert.alert({ title:"Title Here", body:"My Background is a bit transparent.", useTransparency: true, })

More on alerts

The alert method extra options to customize your SoloAlert.

Embeding HTML:

To embed HTML in the alert just put your html code as html property in the alert.

SoloAlert.alert({ title:"Title Here", body:"Body Text With HTML", html: `<img src="https://soloalert.js.org/assets/soloalert.png" alt="SoloAlert Logo" width="150px">` });

To maintain the alert's height, the html contet will become scrollable if its long.

OnOk property

onOk property is useful when you want to perform a spectic function when user clicks the ok button. One of its implementation could be playing audio when user clicks ok.

SoloAlert.alert({ title:"Title Here", body:"Lets Begin The Journey", onOk : ()=>{alert("Journey Begin!");} });

More on Prompts

type property

type property sets the type of the input in the prompt.

SoloAlert.prompt({ title:"Title Here", body:"Enter a Number", type: "number" }).then(value => { SoloAlert.alert({ title: "Prompt Output", body: "The Entered Number was " + value }) })

attributes property

attributes property sets the attributes to the input element in the prompt.

SoloAlert.prompt({ title:"Title Here", body:"Enter your Email", attributes: { type: "email", title: "Your Email?", "aria-label": "Your Email?", id: "cat", class: "meow", placeholder: "Enter your Email", } }).then(value => { SoloAlert.alert({ title: "Prompt Output", body: "The Entered Email was " + value }) })

onCancel property

onCancel property is useful when you want to perform a spectic function when user clicks the cancel button.

SoloAlert.prompt({ title:"Title Here", body:"Do you want to cancel", onOk: ()=>{alert("User Pressed Ok!")}, onCancel: ()=>{alert("User Canceled the Prompt!")} });

onInput property

onInput property is useful when you want to perform a spectic function everytime user entered something into the input. You can get the value of input by event.target.value

SoloAlert.prompt({ title:"Title Here", body:"Do you want to cancel", onOk: ()=>{alert("User Pressed Ok!")}, onCancel: ()=>{alert("User Canceled the Prompt!")}, onInput: (e)=>{console.log("User Entered: " + e.target.value);} });

textLimit property

textLimit property is used to set the textlimit of the prompt input. the default value is 100

SoloAlert.prompt({ title:"Title Here", body:"Do you want to cancel", textLimit: 200, onOk: ()=>{alert("User Pressed Ok!")}, onCancel: ()=>{alert("User Canceled the Prompt!")}, onInput: (e)=>{console.log("User Entered: " + e.target.value);} });

Options:

SoloAlert.alert({...options});

There are many options to customize your alert.

Name Value Use
title String Sets the title of SoloAlert
body String Sets the body text of SoloAlert
html String Sets the html content you want to display in SoloAlert
useTransparency Boolean Sets whether the SoloAlert Backdrop backgound is semi-transparent.
theme auto | light | dark Sets the theme of the SoloAlert
icon success | error | warning | "any" Sets the icon to display in SoloAlert
onOk JavaScript Function runs the given function when ok button is clicked

options to customize your prompt.

SoloAlert.prompt({...options});
Name Value Use
title String Sets the title of SoloAlert
body String Sets the body text of SoloAlert
type String Sets the type of the input box shown in the prompt. all the HTML Input types are valid value for type.
attributes Object Sets the attribues to the input element in the prompt. It accepts an Object with the keys as attribute names and values as respective values.
useTransparency Boolean Sets whether the SoloAlert Backdrop backgound is semi-transparent.
theme auto | light | dark Sets the theme of the SoloAlert
textLimit number Sets the text limit of the prompt input
onOk JavaScript Function runs the given function when ok button is clicked
onCancel JavaScript Function runs the given function when Cancel button is clicked
onInput JavaScript Function runs the given function when User Inputs Texts in the Input

options to customize your confirm.

SoloAlert.confirm({...options});
Name Value Use
title String Sets the title of SoloAlert
body String Sets the body text of SoloAlert
useTransparency Boolean Sets whether the SoloAlert Backdrop backgound is semi-transparent.
theme auto | light | dark Sets the theme of the SoloAlert
onOk JavaScript Function runs the given function when ok button is clicked
onCancel JavaScript Function runs the given function when Cancel button is clicked

SoloAlert Options:

Properties and method that are available on the global object SoloAlert:

SoloAlert.defaults

It is an object that stores the default values to be used within the alerts, prompts, confirm. You can change the default values by this object.

The defaults' properties are given below

{
  title: "Title",
  body: "",
  icon: "",
  theme: "auto",
  html: "",
  type: "text",
  textLimit: 100,
  useTransparency: false,
  onOk: function () { },
  onCancel: function () { },
  onInput: function () { },
}

you can change defaults' properties to anything that you want as the default.

SoloAlert.changeTheme(theme)

changeTheme changes the theme of the SoloAlert. The valid values for the theme are "auto", "dark", "light".

SoloAlert.setAsDefault()

This replaces the browser's default alert(), prompt() and confirm() with the SoloAlert's alert, prompt, confirm. Means when you trigger the browser default alerts it will instead show a SoloAlert

when you set SoloAlert to as default browser alerts then there's a slight change in the syntax of writing alerts also.

when SoloAlert set to default its first argument is the body of the alert and the second argument is the alert options. and you don't have to define body in options. Also now the second argument options becomes optional.

Then the title can be set using the SoloAlert.defaults so that title stays same in every alert and you don't have to everytime set the alert title.

Example using SoloAlert as default Browser alert with a default title set to the alert.

SoloAlert.setAsDefault(); SoloAlert.defaults.title = "Arnav Says"; alert("hi");

The same logic applies with the prompts and confirm also!

SoloAlert.resetDefaults()

This method removes SoloAlert as Browser default and now alert(), confirm(), and prompt() would show the browser UI.

Example using resetDefaults();

SoloAlert.setAsDefault(); alert("I will Show soloalert alert", {title: "SoloAlert UI", icon: "success"}); //SoloAlert UI SoloAlert.resetDefaults(); alert("I will show browser alert UI"); //browser UI

Made With ❤ By Arnav Kumar

Feel Free to Contribute and notify me of any bugs.

Star Issue Fork Follow