Custom Content

Relevant source files

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

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

The @pcstyle/toast notification system is a React-based library designed to handle dynamic notifications with support for dual-theming and interactive elements. It allows developers to push notifications to a global store that are then rendered through a provider component using Framer Motion for animations.

The system is built with strict type safety and supports various notification states including success, error, info, warning, and loading. It also includes advanced features like promise-based toast updates and custom action buttons within the notification UI.

Sources: package.json:1-15, src/store.ts:5-15, src/index.ts:35-50

Architecture and Data Flow

The system operates using an observer pattern where a centralized ToastStore manages the state of active notifications. The ToastProvider subscribes to this store to receive updates and render the current list of toasts.

Store Mechanism

The ToastStore class maintains an array of Toast objects and a list of observers. It provides methods to add, remove, and update toasts. When the state changes, it notifies all subscribed observers.

Component Interaction

The library exposes a toast function as the primary interface for users. This function interacts directly with the toastStore instance.

Data Structures and Configuration

The core of the system is the Toast interface and the configuration options provided to the ToastProvider.

Toast Interface

The Toast object defines the content and behavior of a single notification.

Field	Type	Description
id	string	Unique identifier generated by the store.
message	string | React.ReactNode	The content of the toast; supports custom JSX.
type	ToastType	"success", "error", "info", "warning", "loading", or "default".
duration	number	Time in ms before auto-removal (default: 4000ms).
action	object	Optional button with label and onClick handler.

Sources: src/store.ts:7-17, src/store.ts:38

Provider Configuration

The ToastProvider accepts props to control the visual theme and screen placement.

Prop	Type	Default	Options
theme	string	"cyber"	"cyber", "minimal"
position	string	"bottom-right"	"top-right", "top-center", "bottom-right", "bottom-center"

Sources: src/provider.tsx:8-12, src/provider.tsx:21-26

Implementation Details

Theme Handling

The system supports a "cyber" theme (cyberpunk-inspired with neon borders and animations) and a "minimal" theme. The layout uses Tailwind CSS classes for positioning and styling.

const positionClasses = {
  "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:21-26, src/provider.tsx:37-45

Promise Integration

The toast.promise utility allows for automatic state transitions based on an asynchronous operation. It creates a "loading" toast and updates it to either "success" or "error" once the promise resolves or rejects.

toast.promise = async <T,>(
  promise: Promise<T>,
  data: {
    loading: string;
    success: (data: T) => string;
    error: (err: any) => string;
  },
  options?: ToastOptions
) => {
  const id = toast.loading(data.loading, options);
  try {
    const result = await promise;
    toastStore.update(id, { message: data.success(result), type: "success", duration: 4000 });
    return result;
  } catch (err) {
    toastStore.update(id, { message: data.error(err), type: "error", duration: 5000 });
    throw err;
  }
};

Sources: src/index.ts:35-53

Build and Environment

The project is configured as an ES module (type: "module") targeting ES2020. It relies on framer-motion for animations and react version 18 or higher.

Sources: package.json:5-25, tsconfig.json:3-15

The @pcstyle/toast package provides a robust framework for managing user notifications with high customizability through React nodes and a centralized store, ensuring consistent state across the application.