Store Functions

/**
 * Display a new notification and return its ID
 * @param notification - Notification configuration object
 * @param store - Optional custom store instance, defaults to global store
 * @returns Generated or provided notification ID
 */
function showNotification(notification: NotificationData, store?: NotificationsStore): string;

import { showNotification, notifications } from "@mantine/notifications";

// Basic notification
const id = showNotification({
  message: 'Hello world!',
});

// Notification with title and color
showNotification({
  title: 'Success',
  message: 'Your data was saved successfully',
  color: 'green',
});

// Notification with custom position
showNotification({
  message: 'Top left notification',
  position: 'top-left',
});

// Notification with custom auto-close
showNotification({
  message: 'This closes after 10 seconds',
  autoClose: 10000,
});

// Notification with callbacks
showNotification({
  message: 'Notification with callbacks',
  onOpen: (data) => console.log('Opened:', data.id),
  onClose: (data) => console.log('Closed:', data.id),
});

// Using the notifications object (same functionality)
notifications.show({
  message: 'Same as showNotification',
});

/**
 * Hide a notification by its ID
 * @param id - Notification ID to hide
 * @param store - Optional custom store instance, defaults to global store
 * @returns The provided notification ID
 */
function hideNotification(id: string, store?: NotificationsStore): string;

import { showNotification, hideNotification, notifications } from "@mantine/notifications";

// Show and later hide
const id = showNotification({
  message: 'I will be hidden manually',
  autoClose: false,
});

// Hide after 3 seconds
setTimeout(() => {
  hideNotification(id);
}, 3000);

// Using the notifications object
setTimeout(() => {
  notifications.hide(id);
}, 3000);

/**
 * Update an existing notification with new properties
 * @param notification - Notification data with ID and properties to update
 * @param store - Optional custom store instance, defaults to global store
 * @returns The notification ID or undefined if not found
 */
function updateNotification(notification: NotificationData, store?: NotificationsStore): string | undefined;

import { showNotification, updateNotification, notifications } from "@mantine/notifications";

// Show initial notification
const id = showNotification({
  id: 'status-update',
  message: 'Processing...',
  color: 'blue',
  loading: true,
  autoClose: false,
});

// Update with success
setTimeout(() => {
  updateNotification({
    id: 'status-update',
    message: 'Completed successfully!',
    color: 'green',
    loading: false,
    autoClose: 3000,
  });
}, 2000);

// Using the notifications object
notifications.update({
  id: 'status-update',
  message: 'Updated message',
});

/**
 * Remove all notifications and clear the queue
 * @param store - Optional custom store instance, defaults to global store
 */
function cleanNotifications(store?: NotificationsStore): void;

import { cleanNotifications, notifications } from "@mantine/notifications";

// Clear all notifications
cleanNotifications();

// Using the notifications object
notifications.clean();

/**
 * Remove queued notifications only, keep displayed ones
 * @param store - Optional custom store instance, defaults to global store
 */
function cleanNotificationsQueue(store?: NotificationsStore): void;

import { cleanNotificationsQueue, notifications } from "@mantine/notifications";

// Clear only the queue
cleanNotificationsQueue();

// Using the notifications object
notifications.cleanQueue();

/**
 * Update notification state with custom logic
 * @param store - Store instance to update
 * @param update - Function that receives current notifications and returns updated array
 */
function updateNotificationsState(
  store: NotificationsStore, 
  update: (notifications: NotificationData[]) => NotificationData[]
): void;

import { updateNotificationsState, notificationsStore, notifications } from "@mantine/notifications";

// Custom state update logic
updateNotificationsState(notificationsStore, (current) => {
  // Remove all error notifications
  return current.filter(notification => notification.color !== 'red');
});

// Using the notifications object
notifications.updateState(notificationsStore, (current) => {
  // Mark all notifications as non-auto-closing
  return current.map(notification => ({ ...notification, autoClose: false }));
});

/**
 * Create a new notifications store instance
 * @returns New store instance with default state
 */
function createNotificationsStore(): NotificationsStore;

/**
 * Default global notifications store instance
 */
const notificationsStore: NotificationsStore;

/**
 * React hook to subscribe to notifications state
 * @param store - Store instance to subscribe to, defaults to global store
 * @returns Current notifications state
 */
function useNotifications(store?: NotificationsStore): NotificationsState;

import { 
  createNotificationsStore, 
  notificationsStore, 
  useNotifications,
  showNotification 
} from "@mantine/notifications";

// Create custom store for isolated notifications
const customStore = createNotificationsStore();

// Use custom store
showNotification({
  message: 'Custom store notification'
}, customStore);

// Hook to get notifications state
function NotificationStatus() {
  const state = useNotifications();
  
  return (
    <div>
      Active: {state.notifications.length}, 
      Queued: {state.queue.length}
    </div>
  );
}

// Hook with custom store
function CustomStoreStatus() {
  const state = useNotifications(customStore);
  return <div>Custom store notifications: {state.notifications.length}</div>;
}

interface NotificationData extends Omit<NotificationProps, 'onClose'>, Record<`data-${string}`, any> {
  /** Notification id, can be used to close or update notification */
  id?: string;
  /** Position of the notification, if not set, uses Notifications component position */
  position?: NotificationPosition;
  /** Notification message, required for all notifications */
  message: React.ReactNode;
  /** Auto close timeout in ms, or false to disable, overrides component autoClose */
  autoClose?: boolean | number;
  /** Called when notification closes */
  onClose?: (props: NotificationData) => void;
  /** Called when notification opens */
  onOpen?: (props: NotificationData) => void;
}

interface NotificationsState {
  /** Currently displayed notifications */
  notifications: NotificationData[];
  /** Queued notifications waiting to be displayed */
  queue: NotificationData[];
  /** Default position for notifications without explicit position */
  defaultPosition: NotificationPosition;
  /** Maximum number of notifications displayed simultaneously */
  limit: number;
}

type NotificationsStore = MantineStore<NotificationsState>;