@mantine/notifications

What is @mantine/notifications?

@mantine/notifications is a package that provides a set of customizable notification components for React applications. It allows developers to easily display various types of notifications such as success, error, info, and warning messages.

What are @mantine/notifications's main functionalities?

Basic Notification

This feature allows you to display a basic notification with a title and message.

import { showNotification } from '@mantine/notifications';

showNotification({
  title: 'Default notification',
  message: 'Hey there, your code is awesome!'
});

Success Notification

This feature allows you to display a success notification with a custom color and icon.

import { showNotification } from '@mantine/notifications';
import { CheckIcon } from '@mantine/core';

showNotification({
  title: 'Success',
  message: 'Your operation was successful!',
  color: 'green',
  icon: <CheckIcon />
});

Error Notification

This feature allows you to display an error notification with a custom color and icon.

import { showNotification } from '@mantine/notifications';
import { XIcon } from '@mantine/core';

showNotification({
  title: 'Error',
  message: 'Something went wrong!',
  color: 'red',
  icon: <XIcon />
});

Custom Duration

This feature allows you to set a custom duration for how long the notification will be displayed.

import { showNotification } from '@mantine/notifications';

showNotification({
  title: 'Custom duration',
  message: 'This notification will close after 10 seconds',
  autoClose: 10000
});

Update Notification

This feature allows you to update an existing notification, which is useful for long-running tasks.

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

showNotification({
  id: 'load-data',
  loading: true,
  title: 'Loading data',
  message: 'Please wait...',
  autoClose: false,
  disallowClose: true
});

setTimeout(() => {
  updateNotification({
    id: 'load-data',
    color: 'teal',
    title: 'Data loaded',
    message: 'Data was successfully loaded',
    icon: <CheckIcon />,
    autoClose: 2000
  });
}, 3000);

Other packages similar to @mantine/notifications

react-toastify

React-Toastify is a popular library for adding notifications to your React application. It provides a simple API and a variety of customization options. Compared to @mantine/notifications, React-Toastify has a larger community and more extensive documentation.

notistack

Notistack is a highly customizable notification library for React. It allows you to stack notifications and provides a flexible API for managing them. Notistack offers more advanced features like stacking and dismissing notifications compared to @mantine/notifications.

react-notifications-component

React-Notifications-Component is a library that provides a set of customizable notification components for React. It offers a variety of notification types and customization options. This library is similar to @mantine/notifications but provides more built-in themes and styles.

README

Mantine notifications system

Notifications system

View documentation

Installation

# With yarn
yarn add @mantine/hooks @mantine/core @mantine/notifications

# With npm
npm install @mantine/hooks @mantine/core @mantine/notifications

License

MIT