Installation

npm i @windui/alert --save
yarn add @windui/alert

CDN & DOM Usage

<script src="https://cdn.jsdelivr.net/npm/@windui/[email protected]/windui.alert.min.js"></script>
<script>
    new WuiAlert({
        // ...props (in below)
    }).show();
</script>

React Example

import Alert from "@windui/alert";

export default function Index() {
    const trigger = () => {
        const alert = new Alert({
            options: {
                type: "info", // default: info
                theme: "dark", // default: light
                body: `
                    <input name="password" type="password">
                `,
                showCancelButton: true,
                showConfirmButton: true,
                cancelButtonText: "Cancel",
                confirmButtonText: "Confirm",  
                cancelButtonBg: "#dc2626",
                confirmButtonBg: "#16a34a"
            },
            title: "Please enter your password!"
        });

        // .show() -> returns promise
        alert.show().then(({ success, inputs }) => {
            // success -> true (confirm btn) or false (cancel btn)
            // inputs -> array
            const password = inputs.find(i => i.name == "password").value;
            window.alert(`Your password: ${password}`);
        });
    };

    return (
        <button onClick={trigger}>
            Show Alert!
        </button>
    );
};