Rendering Toast Items

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 rendering system in the @pcstyle/toast library is a React-based notification mechanism designed to display transient messages to users. It utilizes a centralized store to manage the lifecycle of notifications and a specialized provider component to handle the visual presentation, animations, and theme-specific styling.

The system supports two distinct visual themes ("cyber" and "minimal") and multiple screen positions. It leverages framer-motion for entry and exit animations, ensuring a fluid user experience while maintaining a strict limit on the number of concurrent visible items to prevent screen clutter.

Core Architecture and Data Flow

The rendering process follows a unidirectional data flow where the ToastStore acts as the single source of truth. The ToastProvider subscribes to this store and updates its local state whenever the list of toasts changes.

System Overview Diagram

The following diagram illustrates the relationship between the external API, the central store, and the rendering component.

Component Subscription

The ToastProvider uses the useEffect hook to establish a subscription to the toastStore upon mounting. This ensures that any changes triggered by the toast utility functions (e.g., toast.success, toast.error) are immediately reflected in the UI.

useEffect(() => {
  return toastStore.subscribe(setToasts);
}, []);

Sources: src/provider.tsx:17-19

Toast State and Data Model

The system defines a structured data model for individual toast items, facilitating consistent rendering across different notification types.

Field	Type	Description
id	string	A unique identifier generated using Math.random().toString(36).
message	string | React.ReactNode	The primary content of the toast.
type	ToastType	One of: success, error, info, warning, loading, or default.
duration	number	(Optional) Time in ms before auto-removal (default is 4000ms).
action	object	(Optional) Contains a label and onClick callback for interactive toasts.

Sources: src/store.ts:5-15, src/store.ts:37-38

Visual Presentation and Theming

The ToastProvider is responsible for the layout and styling of toast items. It supports two primary themes: Cyber (a neon-inspired aesthetic) and Minimal (a clean, modern aesthetic).

Layout Configuration

The provider uses a fixed-position container with a high z-index (10000) to ensure visibility over other UI elements. The position prop determines the alignment of this container.

Position	Tailwind Classes Applied
top-right	top-6 right-6
top-center	top-6 left-1/2 -translate-x-1/2
bottom-right	bottom-6 right-6
bottom-center	bottom-6 left-1/2 -translate-x-1/2

Sources: src/provider.tsx:23-28, src/provider.tsx:31

Theme Implementation

Themes are implemented using conditional CSS classes. The "Cyber" theme includes specific visual elements like a pulsing top-border gradient and a monospaced font.

Animation and Lifecycle

Toasts are wrapped in AnimatePresence from framer-motion to handle exit animations when they are removed from the store.

Animation Logic

1. Initial: Items slide in based on their position. If the position is "right", they slide from x: 20. If "top", they slide from y: -20.
2. Animate: Items fade in to full opacity at their natural position.
3. Exit: Items fade out and scale down to 0.95.

Sources: src/provider.tsx:35-38

State Transitions Sequence

The following sequence diagram shows the lifecycle of a toast from creation to dismissal.

Constraints and Technical Specs

• Concurrency Limit: The system limits the number of visible toasts to the most recent 5 items using .slice(0, 5). Sources: src/store.ts:39
• Loading State: Toasts with the type "loading" do not trigger the automatic setTimeout removal logic, requiring manual dismissal or a status update. Sources: src/store.ts:42-44
• Dependencies: The rendering relies on react (>=18) and framer-motion (>=10). Sources: package.json:20-22
• Compiler Standards: The project targets ES2020 and uses react-jsx for JSX transformation. Sources: tsconfig.json:3-13

The rendering system effectively decouples the notification logic from the UI implementation, allowing for flexible theming and robust state management while maintaining the "cyberpunk" aesthetic defined in the project goals.