Toast Container Logic

Relevant source files

The following files were used as context for generating this wiki page:

• src/provider.tsx
• src/store.ts
• src/index.ts
• package.json
• tsconfig.json

The Toast Container Logic within the @pcstyle/toast library provides a centralized, reactive notification system. It manages the lifecycle of notification messages—from creation and queuing to rendering and automatic removal—using a combination of a singleton state store and a React-based UI provider. The system is designed with dual-theme support ("cyber" and "minimal") and handles various notification types including success, error, info, warning, and asynchronous promises.

Sources: package.json:1-5, src/provider.tsx:1-10

Core Architecture and Data Flow

The architecture follows a Pub/Sub pattern where a central ToastStore acts as the single source of truth. The ToastProvider component subscribes to this store to receive updates and render the current active toasts.

This diagram shows the relationship between the public API, the internal store, and the React provider that manages the UI.
Sources: src/store.ts:22-38, src/provider.tsx:13-17

The Toast Store

The ToastStore is a class-based observer system that maintains an internal array of active toasts. It implements methods for adding, removing, and updating toast objects.

• Visibility Limit: The store limits the number of visible toasts to 5 at any given time using an array slice.
• Auto-dismissal: Unless the toast type is "loading", the store automatically triggers a removal timer (default 4000ms).
• Identity Management: Each toast is assigned a random alphanumeric ID upon creation.

Sources: src/store.ts:23-57

Components and Layout Logic

ToastProvider Component

The ToastProvider is the primary React component responsible for visual layout and animation. It uses framer-motion for entry and exit transitions and AnimatePresence to handle DOM removal.

Feature	Description
Themes	Supports cyber (monospaced, neon borders) and minimal (clean, rounded zinc borders).
Positioning	Fixed positioning for top-right, top-center, bottom-right, and bottom-center.
Interactivity	pointer-events-none on the container allows background clicking, while pointer-events-auto on individual toasts enables interaction.

Sources: src/provider.tsx:7-35

Positioning Configurations

The container uses dynamic CSS classes to anchor itself to different corners of the viewport.

Data Models

Toast Interface

The Toast object defines the structure of every notification managed by the container.

Field	Type	Description
id	string	Unique identifier generated by the store.
message	string | React.ReactNode	The content to display.
type	ToastType	Enum: success, error, info, warning, loading, or default.
duration	number (optional)	Time in ms before auto-removal.
action	object (optional)	Contains label and onClick handler for action buttons.

Sources: src/store.ts:5-18

Implementation Details

Promise Handling

The system includes specialized logic for handling asynchronous operations through toast.promise. This creates a "loading" toast that is programmatically updated to "success" or "error" based on the promise resolution.

Theming Implementation

The "Cyber" theme applies specific neon aesthetics and a scanning animation effect.

// src/provider.tsx:43-52
isCyber 
  ? "bg-black/90 border border-[#ff00ff]/30 text-[#ff00ff] font-mono p-4 shadow-[0_0_20px_rgba(255,0,255,0.1)] relative" 
  : "bg-white border border-zinc-100 shadow-xl rounded-xl p-4 text-zinc-900"

Sources: src/provider.tsx:43-46

Summary

The Toast Container Logic provides a robust foundation for notification management by decoupling state management (in store.ts) from visual representation (in provider.tsx). By limiting visible notifications and providing high-level helper methods for common UI patterns (like promises), it ensures a consistent user experience across different themes and application states.

Sources: src/store.ts:40, src/index.ts:1-10