# Notification System

> This code implements a robust and customizable notification system in React.  It addresses the common need for providing users with feedback on actions, errors, or informational updates. The system uses React's Context API for global state management, making notifications easily accessible throughout the application.    **How it Works:**  1. **Context API:** A `NotificationContext` is created to manage the state of all notifications.  The `useNotifications` hook provides a simple way to access and manipulate this context. 2. **NotificationProvider:** This component wraps the application and provides the notification context to its children. It manages an array of notifications using the `useState` hook. 3. **addNotification:** This function adds new notifications to the array.  It generates a unique ID for each notification, adds a timestamp, and optionally sets a timeout for auto-dismissal based on a provided `duration` property.  4. **removeNotification:** This function removes a notification from the array based on its ID. 5. **removeAllNotifications:** This function clears all notifications from the array. 6. **Notification Component:**  This reusable component renders individual notifications. It displays the notification's type (success, error, warning, info), title, message, optional actions, and a progress bar if a duration is specified.  It also handles smooth slide-out animations upon dismissal. 7. **NotificationContainer:** This component renders all active notifications in a visually appealing container positioned at the top right corner of the screen. 8. **Demo Component:** This showcases how to use the notification system with various notification types (success, error, warning, info), including persistent notifications and notifications with custom actions.  **Key Libraries/Concepts:**  * React Context API * useState, useEffect, useCallback hooks * Functional components * Custom hooks  **Use Cases:**  * Displaying success messages after form submissions. * Showing error messages during API calls. * Providing warnings about potential issues. * Displaying informational messages to guide users. * Implementing persistent notifications for critical alerts.  **Example Scenarios:**  * An e-commerce application could use the system to confirm order placement, display errors during checkout, or warn about low stock levels. * A social media platform might use it to notify users of new messages, friend requests, or activity on their posts. * A task management tool could use it to indicate task completion, alert about deadlines, or report errors during synchronization.  This system allows for easy integration and customization to fit various application needs.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- Live preview: https://21st.dev/@uniquesonu/components/notification-system

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/notification-system?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt