[mantine.dev] Add notifications state subscriptions documentation

apps/mantine.dev/src/pages/changelog/7-12-0.mdx

@@ -5,7 +5,7 @@ import {
 import { Layout } from '@/layout';
 import { MDX_DATA } from '@/mdx';
 
-export default Layout(MDX_DATA.Changelog7110);
+export default Layout(MDX_DATA.Changelog7120);
 
 ## Notifications at any position
 
@@ -14,6 +14,12 @@ with [@mantine/notifications package](/x/notifications):
 
 <Demo data={NotificationsDemos.position} />
 
+## Subscribe to notifications state
+
+You can now subscribe to notifications state changes with `useNotifications` hook:
+
+<Demo data={NotificationsDemos.store} />
+
 ## SemiCircleProgress component
 
 New [SemiCircleProgress](/core/semi-circle-progress) component:

apps/mantine.dev/src/pages/x/notifications.mdx

@@ -220,3 +220,12 @@ notifications.update({
 `notifications.show` and `notifications.update` functions `autoClose` prop has higher priority.
 
 <Demo data={NotificationsDemos.autoclose} />
+
+## Subscribe to notifications state
+
+You can subscribe to notifications state changes with `useNotifications` hook.
+The hook returns an object with `notifications` and `queue` arrays. `notifications`
+array contains all notifications that are currently displayed, `queue` contains
+notifications that are waiting to be displayed.
+
+<Demo data={NotificationsDemos.store} />

packages/@docs/demos/src/demos/notifications/Notifications.demo.store.tsx

@@ -0,0 +1,57 @@
+import { Button, Code, Text } from '@mantine/core';
+import { useCounter } from '@mantine/hooks';
+import { notifications, useNotifications } from '@mantine/notifications';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { Button } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+
+function Demo() {
+  return (
+    <Button
+      onClick={() =>
+        notifications.show({
+          title: 'Default notification',
+          message: 'Do not forget to star Mantine on GitHub! 🌟',
+        })
+      }
+    >
+      Show notification
+    </Button>
+  );
+}`;
+
+function Demo() {
+  const [counter, { increment }] = useCounter();
+  const notificationsStore = useNotifications();
+
+  const showNotification = () => {
+    notifications.show({
+      title: `Notification ${counter}`,
+      message: 'Most notifications are added to queue',
+    });
+
+    increment();
+  };
+
+  return (
+    <>
+      <Button onClick={showNotification} mb="md">
+        Show notification
+      </Button>
+
+      <Text>Notifications state</Text>
+      <Code block>{JSON.stringify(notificationsStore.notifications, null, 2)}</Code>
+
+      <Text mt="md">Notifications queue</Text>
+      <Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code>
+    </>
+  );
+}
+
+export const store: MantineDemo = {
+  type: 'code',
+  code,
+  component: Demo,
+};

packages/@docs/demos/src/demos/notifications/Notifications.demos.story.tsx

@@ -37,3 +37,8 @@ export const Demo_position = {
   name: '⭐ Demo: position',
   render: renderDemo(demos.position),
 };
+
+export const Demo_store = {
+  name: '⭐ Demo: store',
+  render: renderDemo(demos.store),
+};

packages/@docs/demos/src/demos/notifications/index.ts

@@ -5,3 +5,4 @@ export { limit } from './Notifications.demo.limit';
 export { update } from './Notifications.demo.update';
 export { customize } from './Notifications.demo.customize';
 export { position } from './Notifications.demo.position';
+export { store } from './Notifications.demo.store';

packages/@mantine/notifications/src/Notifications.story.tsx

@@ -1,14 +1,11 @@
 import { Button, Group } from '@mantine/core';
-import { Notifications } from './Notifications';
 import { showNotification } from './notifications.store';
 
 export default { title: 'Notifications' };
 
 export function Usage() {
   return (
     <div style={{ padding: 40 }}>
-      <Notifications autoClose={false} position="top-center" limit={5} />
-
       <Group>
         <Button
           onClick={() =>