Toast JS Documentation V1.0.0 (Beta)

Table of Contents

• Class Overview
• Static Properties
• Methods
• Usage Examples
• Customization

Class Overview

The Toast class encapsulates all the functionality required to create and manage toast notifications. It supports:

• Customizable duration (short or long).
• Multiple positions on the screen (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right).
• Customizable styles (predefined or custom CSS).
• Support for icons (static images or animated videos).
• Dismissible toasts with a close button.
• Animation effects (fade, slide-top, slide-bottom, slide-left, slide-right).
• Callback functions for additional functionality.

Static Properties

Duration Constants

Position Constants

Icon Position Constants

Animation Constants

Icon Size Constants

Predefined Style Constants

Methods

makeText(context, text, duration)

Creates a new Toast instance with predefined text and duration.

Parameters

• context: The DOM element where the toast will be appended.
• text: The text to display in the toast.
• duration (optional): The duration of the toast. Defaults to Toast.LENGTH_SHORT.

Returns

A new Toast instance.

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

setText(text)

Sets the text content of the toast. Used for advanced customizations after creating a toast instance.

Parameters

• text: The text to display.

Returns

The Toast instance for method chaining.

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();

setDuration(duration)

Sets the duration of the toast.

Parameters

• duration: The duration in milliseconds or one of the duration constants (LENGTH_SHORT, LENGTH_LONG).

Returns

The Toast instance for method chaining.

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

setStyle(style)

Sets the style of the toast. Can be a predefined style name or a custom style object.

Parameters

• style: A string (e.g., "success") or an object containing CSS properties.

Returns

The Toast instance for method chaining.

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();

setPosition(position)

Sets the position of the toast on the screen.

Parameters

• position: One of the position constants (e.g., POSITION_TOP_CENTER).

Returns

The Toast instance for method chaining.

toast.setPosition(Toast.POSITION_TOP_CENTER);

setAnimation(animationClass)

Sets the animation effect for the toast.

Parameters

• animationClass: One of the animation constants (e.g., FADE).

Returns

The Toast instance for method chaining.

toast.setAnimation(Toast.SLIDE_TOP);

setIcon(iconPath, size, position)

Sets an icon for the toast.

Parameters

• iconPath: The path to the icon (image or video).
• size (optional): The size of the icon (e.g., ICON_SIZE.MEDIUM).
• position (optional): The position of the icon relative to the text (ICON_POSITION_START or ICON_POSITION_END).

Returns

The Toast instance for method chaining.

// 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" });

setDismissible(dismissible)

Makes the toast dismissible by adding a close button.

Parameters

• dismissible (optional): Whether the toast is dismissible. Defaults to true.

Returns

The Toast instance for method chaining.

toast.setDismissible(true).show();

addCallback(callback)

Adds a callback function to be executed when the toast is shown.

Parameters

• callback: A function to execute.

Returns

The Toast instance for method chaining.

toast.addCallback(() => console.log("Toast dismissed!")).show();

show()

Displays the toast.

toast.show();

hide()

Hides the toast.

toast.hide();

Usage Examples

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

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

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

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

const dismissibleToast = Toast.makeText(
  document.body,
  "You can close this toast.",
  Toast.LENGTH_SHORT
);
dismissibleToast.setDismissible(true).show();

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

const animatedToast = Toast.makeText(
  document.body,
  "Slide-in animation!",
  Toast.LENGTH_SHORT
);
animatedToast.setAnimation(Toast.SLIDE_LEFT).show();

const rtlToast = Toast.makeText(
  document.body,
  "مرحبا بالعالم",
  Toast.LENGTH_SHORT
);
rtlToast.setStyle("info")
  .setTextDirection("rtl")
  .show();

Customization

You can customize the toast by:

• Adding custom styles using setStyle.
• Using custom icons with setIcon.
• Defining custom animations with setAnimation.