Hello Readers,
This plugin allows you to show a little popup in your app. It is great way to show a non interfering notification.

Features :

• We can choose the direction where to show the toast (i.e Top, Bottom, Left, Right).
• We can also choose the duration of a toast (i.e. Short or Long. Short duration is approximately 2 seconds and long is approximately 5 seconds).

Usage :

We can use Toast popup in following place.

• When user create an account succesfully.
• When adding or deleting data.
• For battery status, specially when battery is about to die.
• When user logged out.
• When connection failure.

Note: This plugin supports Android, iOS and Windows platform.

Now first of all we need to install the following plugin through CLI:

$ cordova plugin add cordova-plugin-x-toast

Implementation :  

We have two choices to show a Toast.

• Where to show - Direction defines the Toast popup location.
• How much time to show - Duration defines the time of showing Toast popup.

We can use some pre-define methods which makes it more easy.

• showShortTop(message) // Short duration and Top direction
• showShortCenter(message) // Short duration and Center direction
• showShortBottom(message) // Short duration and Bottom direction
• showLongTop(message)  // Long duration and Top direction
• showLongCenter(message)  // Long duration and Center direction
• showLongBottom(message) // Long duration and Bottom direction

For example :

<button onclick=showToast()>Toast showShortTop</button>

function showToast(){
    window.plugins.toast.showShortTop('Hello there!', function(a){
     console.log('toast success: ' + a)
    }, function(b){
     alert('toast error: ' + b)
    })
}

In the above code window.plugins.toast invokes the showShortTop method. This method shows the Toast on top with short duration. So above mentioned methods are working as same as the above example.

We can add options and some styling to the Toast with showWithOptions method. 

For example :

window.plugins.toast.showWithOptions({
      message: "Hello Welcome",
   duration: "short", 
      position: "center", 
      styling: { 
          opacity: 0.75, // Default 0.8 
          backgroundColor: '#FF0000',// Default #333333 
          textColor: '#FFFF00',// Default #FFFFFF 
          textSize: 20.5, // Default 13
          cornerRadius: 16, // iOS default 20, Android Default 100 and minimum is 0
      horizontalPadding: 20, // iOS default 16 and Android Default 50
          verticalPadding: 16 // iOS default 12 and Android Default 30
     } 
});

The styling object is optional to the plugin. With the styling object we can customize Toast popup looks.

For more details Click here.

Hope this will help you :)