Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@mantine/notifications
Advanced tools
Notifications system built on top of [Mantine](https://mantine.dev/) components library.
@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.
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);
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 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 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.
Notifications system built on top of Mantine components library.
# With yarn
yarn add @mantine/notifications @mantine/core @mantine/hooks react-jss
# With npm
yarn add @mantine/notifications @mantine/core @mantine/hooks react-jss
# With install-peerdeps
npx install-peerdeps @mantine/notifications
All @mantine/ scoped packages, dependencies and peer dependencies have MIT licence.
FAQs
Mantine notifications system
The npm package @mantine/notifications receives a total of 137,850 weekly downloads. As such, @mantine/notifications popularity was classified as popular.
We found that @mantine/notifications demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.