Toast JS V2.1.0-beta Documentation

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, GIFs, or animated videos).
• Dismissible toasts with a close button.
• Advanced animation effects (fade, slide, light-speed, wave, wobble).
• Callback functions for additional functionality.
• Responsive design with mobile-first media queries.

Static Properties

Duration Constants

Position Constants

Icon Position Constants

Animation Constants

Text Overflow 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).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(enterAnimation, exitAnimation)

Sets the enter and exit animations for the toast.

Parameters

• enterAnimation: The animation for toast entry (e.g., Toast.SLIDE_IN_TOP).
• exitAnimation: The animation for toast exit (e.g., Toast.SLIDE_OUT_TOP).

Returns

The Toast instance for method chaining.

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

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

setIconShape(shape)

Sets the shape of the icon (circle, square, or squircle).

Parameters

• shape: One of the shape constants (ICON_SHAPE_CIRCLE, ICON_SHAPE_SQUARE, ICON_SHAPE_SQUIRCLE).

Returns

The Toast instance for method chaining.

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