React Toast System A flexible, context-based notification and toast system for React, allowing you to display temporary messages from anywhere in your application.

The Problem Displaying temporary feedback to users (like "Profile saved successfully!" or "Connection lost") can be complex. You need to manage a list of active notifications, handle timers to automatically dismiss them, and render them in a consistent place on the screen, often leading to scattered state and logic.

The Solution This library provides a simple API to manage toasts. It uses a React Context and a Portal to render notifications at the top of your app's DOM tree, while allowing any component to trigger them with a simple hook.

Installation npm install @your-username/react-toast-system

How to Use

1. Wrap your app in In your main App.tsx or layout file, wrap your application with the ToastProvider. This should be near the top of your component tree.

// In your main App.tsx import { ToastProvider } from '@your-username/react-toast-system';

function App() { return ( {/* The rest of your application */} ); }

2. Trigger Toasts from Anywhere Now, any component inside the ToastProvider can use the useToast hook to show a new notification.

// Any component in your app import { useToast } from '@your-username/react-toast-system';

function MyProfilePage() { const { add } = useToast();

const handleSave = () => { // ... save logic add('Profile saved successfully!', 'success'); };

const handleError = () => { //... error logic add('Failed to save profile.', 'error'); }

return ( My Profile Save ); }

This will render a toast that automatically disappears after 5 seconds. You can add your own CSS to style the .toast-container, .toast, and type-specific classes (.toast-success, .toast-error).

API The top-level provider component.

useToast() A hook to access the toast system. Must be used inside a .

Returns:

add(message, type): A function to show a new toast.

message: The string to display.

type: The type of toast ('success', 'error', or 'info').