or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdreact-component.mdstore-functions.md
tile.json

tessl/npm-mantine--notifications

Mantine notifications system providing React-based notification management with state management, flexible positioning, and auto-close functionality

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mantine/notifications@8.2.x

To install, run

npx @tessl/cli install tessl/npm-mantine--notifications@8.2.0

index.mddocs/

Mantine Notifications

Mantine Notifications is a React-based notification system that provides comprehensive state management for displaying, managing, and customizing notifications in web applications. It offers flexible positioning, queuing when limits are reached, auto-close functionality, and seamless integration with the Mantine UI ecosystem.

Package Information

  • Package Name: @mantine/notifications
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @mantine/core @mantine/hooks @mantine/notifications

Core Imports

import { 
  notifications,
  showNotification,
  hideNotification,
  updateNotification,
  cleanNotifications,
  Notifications,
  useNotifications
} from "@mantine/notifications";

For CommonJS:

const { 
  notifications,
  showNotification,
  hideNotification,
  Notifications 
} = require("@mantine/notifications");

Basic Usage

import { notifications, Notifications } from "@mantine/notifications";
import { MantineProvider } from "@mantine/core";

// Setup in your app root
function App() {
  return (
    <MantineProvider>
      <YourApp />
      <Notifications />
    </MantineProvider>
  );
}

// Show notifications anywhere in your app
function YourComponent() {
  const handleShowNotification = () => {
    notifications.show({
      title: 'Success!',
      message: 'Data has been saved successfully',
      color: 'green',
    });
  };

  return <button onClick={handleShowNotification}>Save Data</button>;
}

Architecture

Mantine Notifications is built around several key components:

  • Store System: State management using @mantine/store for notifications queue and display logic
  • React Component: Notifications component that renders notification containers at different screen positions
  • Function API: Multiple usage patterns including direct functions, object methods, and component static methods
  • Position System: Six position options (top/bottom × left/center/right) with independent limit management
  • Queue Management: Automatic queuing when notification limits are exceeded, with queue processing as notifications close

Capabilities

Store Functions

Core notification management functions for showing, hiding, updating, and managing notifications programmatically. These functions provide the primary API for notification control.

function showNotification(notification: NotificationData, store?: NotificationsStore): string;
function hideNotification(id: string, store?: NotificationsStore): string;
function updateNotification(notification: NotificationData, store?: NotificationsStore): string | undefined;
function cleanNotifications(store?: NotificationsStore): void;
function cleanNotificationsQueue(store?: NotificationsStore): void;
function updateNotificationsState(store: NotificationsStore, update: (notifications: NotificationData[]) => NotificationData[]): void;
function createNotificationsStore(): NotificationsStore;
function useNotifications(store?: NotificationsStore): NotificationsState;

const notifications: {
  show: typeof showNotification;
  hide: typeof hideNotification;
  update: typeof updateNotification;
  clean: typeof cleanNotifications;
  cleanQueue: typeof cleanNotificationsQueue;
  updateState: typeof updateNotificationsState;
};

const notificationsStore: NotificationsStore;

Store Functions

React Component

The Notifications component handles rendering notification containers at different screen positions, with full customization of appearance, behavior, and animations.

interface NotificationsProps extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {
  position?: NotificationPosition;
  autoClose?: number | false;
  transitionDuration?: number;
  containerWidth?: number | string;
  limit?: number;
  zIndex?: string | number;
  store?: NotificationsStore;
  withinPortal?: boolean;
}

const Notifications: React.ForwardRefExoticComponent<NotificationsProps & React.RefAttributes<HTMLDivElement>>;

React Component

Types

// Core notification component props interface from @mantine/core
interface NotificationProps extends BoxProps, StylesApiProps<NotificationFactory>, ElementProps<'div', 'title'> {
  variant?: string;
  onClose?: () => void;
  color?: MantineColor;
  radius?: MantineRadius;
  icon?: React.ReactNode;
  title?: React.ReactNode;
  children?: React.ReactNode;
  loading?: boolean;
  withBorder?: boolean;
  withCloseButton?: boolean;
  closeButtonProps?: Record<string, any>;
  loaderProps?: LoaderProps;
}

// Main exported types
interface NotificationData extends Omit<NotificationProps, 'onClose'>, Record<`data-${string}`, any> {
  id?: string;
  position?: NotificationPosition;
  message: React.ReactNode;
  autoClose?: boolean | number;
  onClose?: (props: NotificationData) => void;
  onOpen?: (props: NotificationData) => void;
}

interface NotificationsState {
  notifications: NotificationData[];
  queue: NotificationData[];
  defaultPosition: NotificationPosition;
  limit: number;
}

type NotificationsStore = MantineStore<NotificationsState>;

interface NotificationsProps extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {
  position?: NotificationPosition;
  autoClose?: number | false;
  transitionDuration?: number;
  containerWidth?: number | string;
  notificationMaxHeight?: number | string;
  limit?: number;
  zIndex?: string | number;
  portalProps?: BasePortalProps;
  store?: NotificationsStore;
  withinPortal?: boolean;
}

type NotificationsStylesNames = 'root' | 'notification';

type NotificationsCssVariables = {
  root: '--notifications-z-index' | '--notifications-container-width';
};

type NotificationsFactory = Factory<{
  props: NotificationsProps;
  ref: HTMLDivElement;
  stylesNames: NotificationsStylesNames;
  vars: NotificationsCssVariables;
  staticComponents: {
    show: typeof showNotification;
    hide: typeof hideNotification;
    update: typeof updateNotification;
    clean: typeof cleanNotifications;
    cleanQueue: typeof cleanNotificationsQueue;
    updateState: typeof updateNotificationsState;
  };
}>;

// Additional types used in API signatures
type NotificationPosition = 
  | 'top-left' 
  | 'top-right' 
  | 'top-center' 
  | 'bottom-left' 
  | 'bottom-right' 
  | 'bottom-center';

// Types from @mantine/core dependencies
type MantineColor = string;
type MantineRadius = string | number;
type LoaderProps = Record<string, any>;
type BoxProps = Record<string, any>;
type StylesApiProps<T> = Record<string, any>;
type ElementProps<T, K extends string = never> = Record<string, any>;
type Factory<T> = T;
type MantineStore<T> = Record<string, any>;
type BasePortalProps = Record<string, any>;

// Notification component factory types
type NotificationFactory = Factory<{
  props: NotificationProps;
  ref: HTMLDivElement;
  stylesNames: 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'closeButton';
  vars: { root: '--notification-radius' | '--notification-color' };
}>;