message.ts

Overview

The message.ts file provides a centralized utility for displaying various types of toast notifications—success, error, warning, and informational messages—using the sonner toast library. The main purpose of this module is to offer a simple, consistent API for showing user feedback messages throughout the application with pre-configured toast appearance and behavior.

By abstracting the toast calls behind a single message object, this file promotes reusable, standardized notification styling and timing, improving maintainability and user experience consistency.

Detailed Explanation

Constants

duration

const duration = { duration: 1500 };

• Purpose: Defines the duration (in milliseconds) for which each toast notification remains visible.

• Value: 1500 ms (1.5 seconds)

• Usage: Spread into toast options to keep display time consistent across notification types.

Object: message

The message object exposes four methods corresponding to different notification types. Each method triggers a toast with a specified message and consistent display options.

const message = {
  success: (msg: string) => { ... },
  error: (msg: string) => { ... },
  warning: (msg: string) => { ... },
  info: (msg: string) => { ... },
};

Methods

Each method accepts a single parameter:

• Parameter:
  msg: string — The text message content to display in the toast.

• Return Value:
  None (void). The method triggers a side effect of rendering a toast notification.

• Common Toast Options Used:

  • position: 'top-center' — Places the toast at the top center of the viewport.

  • closeButton: false — Disables the close button on the toast.

  • duration: 1500 — Uses the shared duration constant to control how long the toast displays.

message.success(msg: string): void

Displays a success toast notification with the supplied message.

Example Usage:

message.success('Data saved successfully!');

message.error(msg: string): void

Displays an error toast notification with the supplied message.

Example Usage:

message.error('Failed to load user data.');

message.warning(msg: string): void

Displays a warning toast notification with the supplied message.

Example Usage:

message.warning('Your subscription will expire soon.');

message.info(msg: string): void

Displays an informational toast notification with the supplied message.

Example Usage:

message.info('New updates are available.');

Implementation Details

• The file imports the toast object from the third-party sonner library, which handles the rendering and management of toast notifications.

• Each notification method uses the corresponding toast method (toast.success, toast.error, etc.) to trigger the toast.

• The options passed to each toast call are uniform to ensure consistent appearance and behavior.

• Using a shared duration constant promotes easy adjustment of toast visibility timing from a single place.

• The choice of hiding the close button and positioning to top-center is likely based on UX design considerations for simplicity and prominence.

Interaction with Other Parts of the System

• This utility is typically imported and used by UI components, service handlers, or other modules that need to provide immediate feedback to the user.

• It depends on sonner for low-level toast functionality but abstracts that dependency away from consuming code.

• By centralizing notification logic here, changes to toast style or behavior only need to be made in this file, affecting all notifications globally.

• It integrates with the UI layer indirectly by triggering toasts that overlay on the application's visual interface.

Visual Diagram

classDiagram
    class message {
        +success(msg: string): void
        +error(msg: string): void
        +warning(msg: string): void
        +info(msg: string): void
    }
    class toast {
        +success(msg: string, options: object): void
        +error(msg: string, options: object): void
        +warning(msg: string, options: object): void
        +info(msg: string, options: object): void
    }
    message ..> toast : uses

Summary

The message.ts file is a lightweight, focused utility module that provides a standardized interface for showing toast notifications using the sonner library. It simplifies the process of displaying user feedback messages by exposing four clear methods for success, error, warning, and info types—all sharing consistent styling and duration parameters. This promotes a unified user experience and easier maintenance across the application.