CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mantine--notifications

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

react-component.mddocs/

React Component

The Notifications component handles rendering notification containers at different screen positions, with full customization of appearance, behavior, and animations. It provides the visual layer for the notification system.

Capabilities

Notifications Component

Main React component that renders notification containers at all six positions on the screen.

/**
 * React component that renders notification containers at different screen positions
 * Handles animations, positioning, and portal rendering
 */
const Notifications: React.ForwardRefExoticComponent<NotificationsProps & React.RefAttributes<HTMLDivElement>>;

interface NotificationsProps extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {
  /** Notifications default position, 'bottom-right' by default */
  position?: NotificationPosition;
  /** Auto close timeout for all notifications in ms, false to disable auto close, 4000 by default */
  autoClose?: number | false;
  /** Notification transition duration in ms, 250 by default */
  transitionDuration?: number;
  /** Notification width, cannot exceed 100%, 440 by default */
  containerWidth?: number | string;
  /** Notification max-height, used for transitions, 200 by default */
  notificationMaxHeight?: number | string;
  /** Maximum number of notifications displayed at a time, 5 by default */
  limit?: number;
  /** Notifications container z-index, 400 by default */
  zIndex?: string | number;
  /** Props passed down to the Portal component */
  portalProps?: BasePortalProps;
  /** Store for notifications state, defaults to global store */
  store?: NotificationsStore;
  /** Whether notifications container should be rendered inside Portal, true by default */
  withinPortal?: boolean;
}

Basic Usage:

import { Notifications } from "@mantine/notifications";

// Basic setup - place in your app root
function App() {
  return (
    <div>
      <YourAppContent />
      <Notifications />
    </div>
  );
}

Advanced Configuration:

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

// Custom configuration
function App() {
  return (
    <div>
      <YourAppContent />
      <Notifications
        position="top-center"
        autoClose={5000}
        limit={3}
        containerWidth={500}
        transitionDuration={300}
        zIndex={1000}
      />
    </div>
  );
}

// Multiple notification systems with separate stores
const adminStore = createNotificationsStore();
const userStore = createNotificationsStore();

function App() {
  return (
    <div>
      <YourAppContent />
      {/* Admin notifications */}
      <Notifications 
        store={adminStore}
        position="top-right"
        containerWidth={400}
      />
      {/* User notifications */}
      <Notifications 
        store={userStore}
        position="bottom-left"
        containerWidth={300}
      />
    </div>
  );
}

Portal Configuration:

import { Notifications } from "@mantine/notifications";

function App() {
  return (
    <div>
      <YourAppContent />
      {/* Render without portal */}
      <Notifications withinPortal={false} />
      
      {/* Custom portal target */}
      <Notifications 
        portalProps={{ target: '#notifications-container' }}
      />
    </div>
  );
}

Component Static Methods

The Notifications component exposes static methods that mirror the store functions for convenience.

/**
 * Static methods attached to the Notifications component
 * These are identical to the standalone store functions
 */
interface NotificationsStaticMethods {
  show: typeof showNotification;
  hide: typeof hideNotification;
  update: typeof updateNotification;
  clean: typeof cleanNotifications;
  cleanQueue: typeof cleanNotificationsQueue;
  updateState: typeof updateNotificationsState;
}

Usage Examples:

import { Notifications } from "@mantine/notifications";

// Using static methods - identical to store functions
function MyComponent() {
  const handleClick = () => {
    // All of these are equivalent:
    Notifications.show({ message: 'Hello!' });
    // notifications.show({ message: 'Hello!' });
    // showNotification({ message: 'Hello!' });
  };

  const handleHide = (id: string) => {
    Notifications.hide(id);
  };

  const handleUpdate = (id: string) => {
    Notifications.update({
      id,
      message: 'Updated message',
      color: 'green',
    });
  };

  const handleClean = () => {
    Notifications.clean();
  };

  return (
    <div>
      <button onClick={handleClick}>Show</button>
      <button onClick={() => handleHide('some-id')}>Hide</button>
      <button onClick={() => handleUpdate('some-id')}>Update</button>
      <button onClick={handleClean}>Clean All</button>
    </div>
  );
}

Styling and Theming

The component supports Mantine's styling system with customizable CSS variables and style names.

type NotificationsStylesNames = 'root' | 'notification';

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

interface NotificationsFactory extends Factory<{
  props: NotificationsProps;
  ref: HTMLDivElement;
  stylesNames: NotificationsStylesNames;
  vars: NotificationsCssVariables;
  staticComponents: {
    show: typeof notifications.show;
    hide: typeof notifications.hide;
    update: typeof notifications.update;
    clean: typeof notifications.clean;
    cleanQueue: typeof notifications.cleanQueue;
    updateState: typeof notifications.updateState;
  };
}>;

Custom Styling:

import { Notifications } from "@mantine/notifications";

function App() {
  return (
    <Notifications
      styles={{
        root: { 
          // Custom styles for notification containers
        },
        notification: { 
          // Custom styles for individual notifications
        },
      }}
      classNames={{
        root: 'my-notifications-container',
        notification: 'my-notification',
      }}
    />
  );
}

Position System

The component renders notification containers at all six screen positions simultaneously, showing notifications based on their individual position settings.

type NotificationPosition = 
  | 'top-left' 
  | 'top-right' 
  | 'top-center' 
  | 'bottom-left' 
  | 'bottom-right' 
  | 'bottom-center';

Position Behavior:

  • Each position has its own container and limit tracking
  • Notifications without explicit position use the component's position prop default
  • Queuing happens per-position when limits are exceeded
  • All positions are rendered simultaneously but only show notifications when they have content
import { notifications, Notifications } from "@mantine/notifications";

function App() {
  return (
    <div>
      <YourAppContent />
      {/* Component default position */}
      <Notifications position="bottom-right" limit={3} />
    </div>
  );
}

function SomeComponent() {
  const showNotifications = () => {
    // Uses component default (bottom-right)
    notifications.show({ message: 'Default position' });
    
    // Override position for specific notification
    notifications.show({ 
      message: 'Top center notification',
      position: 'top-center'
    });
    
    // Multiple notifications at same position
    for (let i = 0; i < 5; i++) {
      notifications.show({ 
        message: `Notification ${i + 1}`,
        position: 'top-right'
      });
    }
    // First 3 show immediately (limit=3), others are queued
  };

  return <button onClick={showNotifications}>Show Multiple</button>;
}

Types

type NotificationPosition = 
  | 'top-left' 
  | 'top-right' 
  | 'top-center' 
  | 'bottom-left' 
  | 'bottom-right' 
  | 'bottom-center';

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?: Omit<PortalProps, 'children'>;
  store?: NotificationsStore;
  withinPortal?: boolean;
}

type NotificationsStylesNames = 'root' | 'notification';

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

Integration Examples

Next.js App Router

// app/layout.tsx
import { Notifications } from "@mantine/notifications";
import { MantineProvider } from "@mantine/core";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <MantineProvider>
          {children}
          <Notifications />
        </MantineProvider>
      </body>
    </html>
  );
}

Vite/React App

// main.tsx or App.tsx
import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";

function App() {
  return (
    <MantineProvider>
      <YourApp />
      <Notifications />
    </MantineProvider>
  );
}

Custom Error Boundary Integration

import { Notifications } from "@mantine/notifications";
import { ErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error }: { error: Error }) {
  React.useEffect(() => {
    Notifications.show({
      title: 'Application Error',
      message: error.message,
      color: 'red',
      autoClose: false,
    });
  }, [error]);

  return <div>Something went wrong. Check notifications.</div>;
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <YourApp />
      <Notifications />
    </ErrorBoundary>
  );
}

docs

index.md

react-component.md

store-functions.md

tile.json