Skip to main content

​
useNotification

The useNotification hook manages toast notifications and confirmation dialogs, providing a consistent way to show user feedback and confirmations throughout your application.

​
Import

import { useNotification } from '@/hooks';

​
Signature

const {
  notification,
  showNotification,
  hideNotification,
  confirmState,
  showConfirm,
  hideConfirm
} = useNotification();

​
Return Value

​
notification
{ type: NotificationType, message: string } | null
The current notification object, or null if no notification is active.
​
showNotification
(type: NotificationType, message: string) => void
required
Function to display a toast notification.Parameters:
  • type: The notification type (‘success’ | ‘error’ | ‘info’ | ‘warning’)
  • message: The message to display
​
hideNotification
() => void
required
Function to hide the current notification.
​
confirmState
object
required
The current state of the confirmation dialog.Properties:
  • isOpen: Whether the dialog is currently open
  • title: The dialog title
  • description: The dialog description
  • onConfirm: Callback function when confirmed
  • variant: Optional dialog variant (‘default’ | ‘destructive’)
  • icon: Optional icon type (‘default’ | ‘destructive’ | ‘warning’)
​
showConfirm
function
required
Function to display a confirmation dialog.Parameters:
{
  title: string;
  description: string;
  onConfirm: () => void;
  variant?: 'default' | 'destructive';
  icon?: 'default' | 'destructive' | 'warning';
}
​
hideConfirm
() => void
required
Function to hide the confirmation dialog.

​
Usage

​
Success Notification

import { useNotification } from '@/hooks';

function SaveButton() {
  const { showNotification } = useNotification();
  
  const handleSave = async () => {
    try {
      await saveData();
      showNotification('success', 'Data saved successfully!');
    } catch (error) {
      showNotification('error', 'Failed to save data');
    }
  };
  
  return <button onClick={handleSave}>Save</button>;
}

​
Confirmation Dialog

import { useNotification } from '@/hooks';

function DeleteButton({ itemId }: { itemId: string }) {
  const { showConfirm } = useNotification();
  
  const handleDelete = () => {
    showConfirm({
      title: 'Delete Item',
      description: 'Are you sure you want to delete this item? This action cannot be undone.',
      variant: 'destructive',
      icon: 'destructive',
      onConfirm: async () => {
        await deleteItem(itemId);
      }
    });
  };
  
  return <button onClick={handleDelete}>Delete</button>;
}

​
Displaying Notifications

import { useNotification } from '@/hooks';
import { ToastCustom } from '@/components/ui/toast-custom';

function NotificationContainer() {
  const { notification, hideNotification } = useNotification();
  
  return (
    <>
      {notification && (
        <ToastCustom
          type={notification.type}
          message={notification.message}
          onClose={hideNotification}
        />
      )}
    </>
  );
}

​
Warning Confirmation

import { useNotification } from '@/hooks';

function SubmitForm() {
  const { showConfirm, showNotification } = useNotification();
  
  const handleSubmit = () => {
    showConfirm({
      title: 'Submit Form',
      description: 'Please review your information before submitting.',
      variant: 'default',
      icon: 'warning',
      onConfirm: async () => {
        await submitForm();
        showNotification('success', 'Form submitted successfully!');
      }
    });
  };
  
  return <button onClick={handleSubmit}>Submit</button>;
}

​
Notification Types

The NotificationType can be one of the following:
  • success: Green notification for successful operations
  • error: Red notification for errors
  • info: Blue notification for informational messages
  • warning: Yellow notification for warnings
This hook manages local component state. For global notification management across your app, consider using a context provider or state management solution.

Build docs developers (and LLMs) love

Get started for freeTalk to us