v6.0.35

Mantine Notifications

Mantine notifications system
License

Installation

Package depends on @asuikit/core and @asuikit/hooks.

Install with yarn:

yarn add @asuikit/notifications

Install with npm:

npm install @asuikit/notifications

Demo

Usage

Add Notifications component anywhere in your application, usually it is placed inside MantineProvider next to your App component:

import { MantineProvider } from '@asuikit/core';
import { Notifications } from '@asuikit/notifications';
function Demo() {
return (
<MantineProvider withNormalizeCSS withGlobalStyles>
<Notifications />
<App />
</MantineProvider>
);
}

Then use notifications.show function anywhere in your application:

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() =>
notifications.show({
title: 'Default notification',
message: 'Hey there, your code is awesome! 🤥',
})
}
>
Show notification
</Button>
</Group>
);
}

Functions

Notifications system is based on custom events, @asuikit/notifications package exports the following functions:

  • notifications.show – adds given notification to notifications list or queue depending on current state and limit
  • notifications.update – updates notification that was previously added to the state or queue
  • notifications.hide – removes notification with given id from notifications state and queue
  • notifications.clean – removes all notifications from notifications state and queue
  • notifications.cleanQueue – removes all notifications from queue

All functions can be imported from @asuikit/notifications package and can be used in any part of your application:

import { notifications } from '@asuikit/notifications';

Notification props

Notification state item can have these properties:

  • id – notification id, it is used to update and remove notification, by default id is randomly generated
  • withBorder – determines whether notification should have border
  • withCloseButton – determines whether close button should be visible
  • onClose – calls when notification is unmounted
  • onOpen – calls when notification is mounted
  • autoClose – defines timeout in ms on which notification will be automatically closed, use false to disable auto close
  • message – required notification body
  • color, icon, title, radius, className, style, sx, loading – props added to Notification component

All properties except message are optional.

import { IconX } from '@tabler/icons-react';
import { notifications } from '@asuikit/notifications';
// Bare minimum – message is required for all notifications
notifications.show({ message: 'Hello' });
// Most used notification props
notifications.show({
id: 'hello-there',
withCloseButton: true,
onClose: () => console.log('unmounted'),
onOpen: () => console.log('mounted'),
autoClose: 5000,
title: "You've been compromised",
message: 'Leave the building immediately',
color: 'red',
icon: <IconX />,
className: 'my-notification-class',
style: { backgroundColor: 'red' },
sx: { backgroundColor: 'red' },
loading: false,
});

Notifications preview (message prop used as children):

Color
Shades
Radius
xs
sm
md
lg
xl

Customize notification styles

You can use sx, style, className or Styles API classNames, styles props to customize notification styles:

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() =>
notifications.show({
title: 'Default notification',
message: 'Hey there, your code is awesome! 🤥',
styles: (theme) => ({
root: {
backgroundColor: theme.colors.blue[6],
borderColor: theme.colors.blue[6],
'&::before': { backgroundColor: theme.white },
},
title: { color: theme.white },
description: { color: theme.white },
closeButton: {
color: theme.white,
'&:hover': { backgroundColor: theme.colors.blue[7] },
},
}),
})
}
>
Show customized notification
</Button>
</Group>
);
}

Notifications container position

Notifications renders notifications container with fixed position inside Portal. Position cannot be changed per notification. Notifications supports the following positions:

  • top-left
  • top-right
  • top-center
  • bottom-left
  • bottom-right
  • bottom-center
import { Notifications } from '@asuikit/notifications';
function Demo() {
return <Notifications position="top-right" zIndex={2077} />;
}

Limit and queue

Notifications uses use-queue hook to manage state. You can limit maximum amount of notifications that can be displayed by setting limit prop on Notifications:

import { Notifications } from '@asuikit/notifications';
function Demo() {
return <Notifications limit={5} />;
}

All notifications added after limit was reached will be added into queue and displayed when notification from current state is closed.

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() => {
Array(10).fill(0).forEach((_, index) => {
setTimeout(() => {
notifications.show({
title: `Notification ${index + 1}`,
message: 'Most notifications are added to queue',
});
}, 200 * index);
});
}}
>
Show 10 notifications
</Button>
</Group>
);
}

Remove notifications from state and queue

To remove specific notification from state or queue use notifications.hide function:

import { notifications } from '@asuikit/notifications';
notifications.show({ id: 'hello', message: 'Hello!' });
notifications.hide('hello');

Use notifications.cleanQueue function to remove all notifications that are not currently displayed and notifications.clean function to remove all notifications from state and queue:

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() => {
Array(10)
.fill(0)
.forEach((_, index) => {
notifications.show({
title: `Notification ${index + 1}`,
message: 'Most notifications are added to queue',
autoClose: false,
});
});
}}
>
Show 10 notifications
</Button>
<Button variant="outline" color="gray" onClick={notifications.cleanQueue}>
Clean queue
</Button>
<Button variant="outline" color="red" onClick={notifications.clean}>
Clean all
</Button>
</Group>
);
}

Update notification

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
import { IconCheck } from '@tabler/icons-react';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() => {
notifications.show({
id: 'load-data',
loading: true,
title: 'Loading your data',
message: 'Data will be loaded in 3 seconds, you cannot close this yet',
autoClose: false,
withCloseButton: false,
});
setTimeout(() => {
notifications.update({
id: 'load-data',
color: 'teal',
title: 'Data was loaded',
message: 'Notification will close in 2 seconds, you can close this notification now',
icon: <IconCheck size="1rem" />,
autoClose: 2000,
});
}, 3000);
}}
>
Show update notification
</Button>
</Group>
);
}

Auto close

You can configure auto close timeout with Notifications:

import { Notifications } from '@asuikit/notifications';
// All notifications will be closed automatically in 4000ms
function Demo() {
return <Notifications autoClose={4000} />;
}

Or in notifications.show/notifications.update functions:

import { notifications } from '@asuikit/notifications';
notifications.show({
message: 'I will close in 500ms seconds',
autoClose: 500,
});
notifications.update({
id: 'hello',
message: 'I will never close',
autoClose: false,
});

notifications.show and notifications.update functions autoClose prop always has higher priority.

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() => notifications.show({ message: 'I will close in 4 seconds' })}
>
Notifications Provider timeout
</Button>
<Button
variant="outline"
onClick={() =>
notifications.show({
message: 'I will close in 500ms',
autoClose: 500,
})
}
>
Closes in 500ms
</Button>
<Button
variant="outline"
onClick={() =>
notifications.show({
color: 'blue',
title: 'I will never close',
message: 'unless you click X',
autoClose: false,
})
}
>
Never closes automatically
</Button>
</Group>
);
}

Multi Notifications Positions

import { Group, Button } from '@asuikit/core';
import { notifications } from '@asuikit/notifications';
function Demo() {
return (
<Group position="center">
<Button
variant="outline"
onClick={() =>
notifications.show({
title: 'Default notification',
message: 'Hey there, your code is awesome! 🤥',
})
}
>
Show default notification
</Button>
<Button
variant="outline"
onClick={() =>
notifications.show('other-notifications', {
title: 'Default notification',
message: 'Hey there, your code is awesome! 🤥',
})
}
>
Show notification in others position
</Button>
</Group>
);
}

Notifications component props

NameTypeDescription
autoClose
number | false
Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by notifications.show function
containerWidth
string | number
Notification width, cannot exceed 100%
eventKey
string
multi notifications event key
limit
number
Maximum amount of notifications displayed at a time, other new notifications will be added to queue
notificationMaxHeight
string | number
Notification max-height, used for transitions
position
"bottom-center" | "top-center" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
Notifications position
target
string | HTMLElement
Target element of Portal component
transitionDuration
number
Notification transitions duration, 0 to turn transitions off
zIndex
ZIndex
Notifications container z-index