better-alerts v1.0.32

Navigation

• Description
• Instalation
• Modal usage
• Documentation
• To do list

Description

Simple library for creating fancy alerts/modals on your websites. Written with Typescript without any JS animation library.

• I used SVG Animated icons from Kamonlojn's svg-icons-animate repository

Installation

Webpack

npm install --save better-alerts

yarn add better-alerts

CDN

//Styles
<link href="https://cdn.jsdelivr.net/npm/better-alerts@1.0.31/lib/styles/better-alerts.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/better-alerts@1.0.31/lib/styles/svg-icons-animate.css" rel="stylesheet">

//Script
<script src="https://cdn.jsdelivr.net/npm/better-alerts@1.0.31/lib/browser.js"></script>

Modal Usage

Single line

import BetterAlerts from "better-alerts";
import "better-alerts/lib/styles/better-alerts.css";
import "better-alerts/lib/styles/svg-icons-animate.css";

BetterAlerts.modal({ title: "Test." }).fire();

Without main function export

import { modal } from "better-alerts";
import "better-alerts/lib/styles/better-alerts.css";
import "better-alerts/lib/styles/svg-icons-animate.css";

modal({ title: "Shortest way" }).fire()

Modal variable and more complex configuration

import BetterAlerts from "better-alerts";
import "better-alerts/lib/styles/better-alerts.css";
import "better-alerts/lib/styles/svg-icons-animate.css";

const { 
    fire, 
    isVisible, 
    close, 
    container, 
    options 
} = BetterAlerts.modal({
    title: "I'M BIG!",
    text: "What does our customer think?",
    icon: "success",
    showDenyButton: true,
    denyButtonText: "NO!",
    confirmButtonText: "YES",
})

const { result, modal } = await fire();

Close time

import BetterAlerts from "better-alerts";
import "better-alerts/lib/styles/better-alerts.css";
import "better-alerts/lib/styles/svg-icons-animate.css";

BetterAlerts.modal({ 
    title: "Test.",
    closeTime: 1500 //1.5s
}).fire();

Image

import BetterAlerts from "better-alerts";
import "better-alerts/lib/styles/better-alerts.css";
import "better-alerts/lib/styles/svg-icons-animate.css";

BetterAlerts.modal({ 
    title: "Image Test.",
    image: {
        url: "https://unsplash.it/400/200",
        width: 400,
        height: 200,
    }
}).fire();

Modal result

import BetterAlerts from "better-alerts";
import "better-alerts/lib/styles/better-alerts.css";
import "better-alerts/lib/styles/svg-icons-animate.css";

const { fire } = BetterAlerts.modal({
    showDenyButton: true,
    showConfirmButton: true,
    denyButtonText: "Abandon mission",
    confirmButtonText: "Follow train",
    icon: "error",
    title: "Ah shit, here we go again.",
    text: "All you had to do is follow the damn train CJ",
});

const { action } = await fire();

if(action === "confirm"){
    BetterAlerts.modal({ 
        title: "Good job bro.",
        showConfirmButton: true,
        confirmButtonText: "OK",
        icon: "success",
        image: {
            width: 300,
            url: "https://i.imgur.com/voWnwpi.png",
            alt: "Respect+"
        }
    }).fire();

    return;
}

BetterAlerts.modal({ 
    title: "Oh man.",
    showConfirmButton: true,
    confirmButtonText: "OK",
    icon: "error",
    image: {
        width: 300,
        url: "https://i.imgur.com/jLaYy5d.png",
        alt: "Failed"
    }
}).fire();

Toast usage

Single line

import BetterAlerts from "better-alerts";
import "better-alerts/styles/better-alerts.css";
import "better-alerts/styles/svg-icons-animate.css";

BetterAlerts.toast({ text: "Test toast" }).fire();

Without main function export

import { toast } from "better-alerts";
import "better-alerts/styles/better-alerts.css";
import "better-alerts/styles/svg-icons-animate.css";

toast({ text: "Test toast" });

More complex configuration

import { toast } from "better-alerts";
import "better-alerts/styles/better-alerts.css";
import "better-alerts/styles/svg-icons-animate.css";

toast({
    text: "It's easy",
    icon: "Success",
    textColor: "white",
    background: "black",
    pauseOnHover: false,
    progressBar: true,
    progressBarColor: "cyan",
    closeOnClick: false,
    position: "left",
    closeTime: 3000
})

Documentation

BetterAlerts

Modal

Modal options

Image

Toast

Toast options

Simple position

Result

Action

Icon

Position

To do list

• Add Toasts
• Custom HTML in modals
• CDN
• Toast promisses