SnackbarSmooth Cordova Plugin

A customizable Snackbar plugin for Cordova that allows you to display interactive Snackbar messages in Android apps with event listeners and full styling control.

Features

• Display Snackbar notifications with custom messages.
• Add action buttons that execute JavaScript callbacks.
• Listen to Snackbar onShow, onDismiss, and onAction Click events.
• Fully customizable background color, text color, action button color.
• Assign unique IDs to Snackbars to track events.
• Compatible with AdMob banners and other overlays.

Installation

cordova plugin add cordova-plugin-snackbar-smooth

Usage

1. Register Event Listeners

cordova.plugin.snackbar.smooth.on('onShow', function(data) {
    console.log('Snackbar Shown:', data.id);
});

cordova.plugin.snackbar.smooth.on('onDismiss', function(data) {
    console.log('Snackbar Dismissed:', data.id);
});

cordova.plugin.snackbar.smooth.on('onAction', function(data) {
    console.log('Snackbar Action Clicked:', data.id);
});

2. Show Snackbar

cordova.plugin.snackbar.smooth.show({
    id: "updateNotice",                   // Optional ID to track this Snackbar
    message: "New version available!",    // Snackbar message text
    actionText: "Update",                 // Text on the action button
    backgroundColor: "#333333",           // Background color of Snackbar
    textColor: "#FFFFFF",                 // Text color of message
    actionTextColor: "#FF4081",           // Text color of action button
    duration: 3000                        // Duration in ms (3000 = 3 seconds)
}, function() {
    console.log("Snackbar displayed successfully");
}, function(err) {
    console.error("Error showing Snackbar:", err);
});

3. Dismiss Snackbar

cordova.plugin.snackbar.smooth.dismiss(function() {
    console.log("Snackbar dismissed");
}, function(err) {
    console.error("Error dismissing Snackbar:", err);
});

API Reference

.show(options, successCallback, errorCallback)

| Parameter | Type | Description | |-----------------|------------|-------------| | options | Object | Snackbar configuration (see below) | | successCallback | Function | Called when Snackbar shows successfully | | errorCallback | Function | Called if an error occurs |

options object:

| Property | Type | Default | Description | |---------------------|------------|--------------|-------------| | id | String | (optional) | Unique ID for tracking Snackbar events | | message | String | (required) | Text message to display | | actionText | String | "" | Text for action button (optional) | | backgroundColor | String | "#323232" | Snackbar background color | | textColor | String | "#FFFFFF" | Message text color | | actionTextColor | String | "#FF4081" | Action button text color | | duration | Number | Snackbar.LENGTH_SHORT | Duration in milliseconds or Snackbar constant |

.dismiss(successCallback, errorCallback)

| Parameter | Type | Description | |----------------------|------------|-------------| | successCallback | Function | Called when Snackbar is dismissed | | errorCallback | Function | Called if an error occurs |

.on(event, callback)

Registers event listeners for Snackbar events.

| Event Name | Trigger | |-------------|--------| | onShow | Snackbar is shown | | onDismiss | Snackbar is dismissed | | onAction | Action button is clicked |

cordova.plugin.snackbar.smooth.on('onShow', function(data) {
    console.log('Snackbar Shown:', data.id);
});

Event Callback Data Structure

Every event callback returns a JSON object:

{
    "event": "onAction",
    "id": "updateNotice",
    "data": "clicked"
}

| Property | Description | |----------|-------------| | event | The event type: "onShow", "onDismiss", "onAction" | | id | The unique ID of the Snackbar (if specified in .show) | | data | Event-specific data ("clicked", "dismissed", etc.) |

Example: Full Integration

document.addEventListener('deviceready', function() {
    cordova.plugin.snackbar.smooth.on('onAction', function(data) {
        if (data.id === "updateNotice") {
            console.log("User clicked update!");
            // Your custom action here
        }
    });

    cordova.plugin.snackbar.smooth.show({
        id: "updateNotice",
        message: "New version available",
        actionText: "Update",
        duration: 5000
    });
});

Compatibility

• Android Only
• Cordova >= 8.0.0
• Requires AndroidX & Material Design dependencies.

License

MIT License.

Author

Buyung Setiawan Purnomo