@windui/snackbar

Developed with ❤️ by Swôth

Installation

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

Snackbar Components ᴺᴱᵂ

new Snackbar({
    title: "Hello components!",
    message: "Confirm or cancel.",
    options: {
        type: "success",
        components: {
            // default: Confirm
            confirmText: "Approuver",
            // default: Cancel
            cancelText: "Annuler",
            confirmEvent: ({ $, event }) => {
                alert(`Clicked to ${$.snackbar.title}`);
                $.hide();
                // also you can use $.show() again
            },
            cancelEvent: ({ $, event }) => {
                alert(`Cancelled!`);
                $.hide();
            }
        }
    }
})

CDN & DOM Usage

<script src="https://cdn.jsdelivr.net/npm/@windui/snackbar@x.x.x/windui.snackbar.min.js"></script>
<script>
    new WuiSnackbar({
        // ...props
    }).show();
</script>

React Example

import Snackbar from "@windui/snackbar";

export default function Index() {
    const trigger = () => {
        const hello = new Snackbar({
            options: {
                duration: 3000,
                speed: 500, // animation speed
                type: "info", // snackbar types: info, success, error, warning
                align: "right", // right or left
                position: "bottom" // top or bottom
            },
            title: "Hello World!",
            message: "No post on Sundays!"
        });

        // show snackbar
        hello.show();

        // hide before timeout
        // hello.hide();
    };

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