Toast JS V2.0.0 Documentation

Example

const toast = Toast.makeText(document.body,"Hello Toast!",Toast.LENGTH_SHORT).show();

Example

const toast = Toast.makeText(
document.body,
"Hello Toast!",
Toast.LENGTH_SHORT
);
toast.setText("Operation successful!")
.setStyle("success")
.setIcon("checkmark.png", Toast.ICON_SIZE.MEDIUM)
.show();

Example

const toast = Toast.makeText(
document.body,
"Hello Toast!",
Toast.LENGTH_SHORT
);
toast.setDuration(5000); // 5 seconds
toast.show();

Example

const toast = Toast.makeText(
document.body,
"Hello Toast!",
Toast.LENGTH_SHORT
);

// Apply custom styles
toast.setStyle({
backgroundColor: "#4A5568",
color: "#FFFFFF",
padding: "15px 25px",
borderRadius: "10px",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.2)",
fontSize: "16px",
fontFamily: "Arial, sans-serif",
});

toast.show();

Example

toast.setPosition(Toast.POSITION_TOP_CENTER);

Example

toast.setAnimation(
  Toast.LIGHT_SPEED_IN_RIGHT,
  Toast.LIGHT_SPEED_OUT_RIGHT
).show();

Example

// Using a predefined icon size
toast.setIcon("https://example.com/icon.png", Toast.ICON_SIZE.SMALL).show();

// Using a custom icon size
toast.setIcon("https://example.com/icon.png", { width: "30px", height: "30px" });

Example

toast.setIconShape(Toast.ICON_SHAPE_SQUIRCLE).show();

1. Create a simple toast with default settings:

const toast = Toast.makeText(
document.body,
"Hello Toast!",
Toast.LENGTH_SHORT
);
toast.show();

2. Create a success toast with custom style:

const successToast = Toast.makeText(
document.body,
"Operation Successful!",
Toast.LENGTH_LONG
);
successToast.setStyle("success").show();

3. Create an error toast with custom position:

const errorToast = Toast.makeText(
document.body,
"Error occurred!",
Toast.LENGTH_SHORT
);
errorToast.setPosition(Toast.POSITION_TOP_RIGHT)
.setStyle("error")
.show();

4. Create a toast with an icon:

const iconToast = Toast.makeText(
document.body,
"Toast with Icon!",
Toast.LENGTH_SHORT
);
iconToast.setIcon(
"https://example.com/icon.png",
Toast.ICON_SIZE.SMALL
).show();

5. Create a dismissible toast:

const dismissibleToast = Toast.makeText(
document.body,
"You can close this toast.",
Toast.LENGTH_SHORT
);
dismissibleToast.setDismissible(true, "#fff").show(); // Specifying the color remains optional 

6. Create a toast with a callback after it disappears:

const callbackToast = Toast.makeText(
document.body,
"Callback after hide!",
Toast.LENGTH_SHORT
);
callbackToast.addCallback(() => console.log("Toast dismissed!"))
.show();

7. Create a toast with custom animations:

const animatedToast = Toast.makeText(
  document.body,
  "Custom Animations!",
  Toast.LENGTH_SHORT
);
animatedToast.setAnimation(
  Toast.WAVE_IN,
  Toast.WOBBLE_OUT
).show();

8. Create a toast with an icon:

const iconToast = Toast.makeText(
      document.body,
      "Toast with Icon!",
      Toast.LENGTH_SHORT
        );
        iconToast.setIcon(
      "/path/to/icon.svg",
      Toast.ICON_SIZE.SMALL
        ).show();

9. Create a toast with a custom icon size:

const customIconToast = Toast.makeText(
      document.body,
      "Toast with Custom Icon Size!",
      Toast.LENGTH_SHORT
    );
    customIconToast.setIcon(
      "/path/to/custom-icon.png", 
      { width: "30px", height: "30px" }
    ).show();

10. Create a toast with a custom icon shape:

const shapeIconToast = Toast.makeText(
      document.body,
      "Toast with Custom Icon Shape!",
      Toast.LENGTH_SHORT
    );
    shapeIconToast.setIcon(
      "https://example.com/icon.gif", 
      Toast.ICON_SIZE.SMALL
    ).setIconShape(Toast.ICON_SHAPE_SQUIRCLE).show();