Chuyển tới nội dung chính

NotificationProvider

A context provider component for managing application-wide notifications.

📋 Overview

PropertyValue
Filesrc/components/NotificationProvider.tsx
TypeReact Context Provider
AuthorUIP Team
Version1.0.0

🎯 Purpose

  • Provide notification context to app
  • Manage toast notifications
  • Handle real-time alerts
  • Queue and display notifications

🚀 Usage

import { NotificationProvider, useNotification } from '@/components/NotificationProvider';

// Wrap app
function App() {
return (
<NotificationProvider>
<MainContent />
</NotificationProvider>
);
}

// Use in components
function MyComponent() {
const { notify } = useNotification();

const handleSuccess = () => {
notify({
type: 'success',
message: 'Report submitted successfully'
});
};
}

📦 Props

PropTypeRequiredDefaultDescription
childrenReactNodeYes-Child components
positionToastPositionNo'top-right'Toast position
maxToastsnumberNo5Max visible toasts
durationnumberNo5000Default duration (ms)

🔧 Notification Types

TypeIconColor
successGreen
errorRed
warning⚠️Yellow
infoℹ️Blue
alert🚨Orange

See the complete components reference for all available components.