[@mantine/notifications] Fix limit prop not working (#5105)

mantinedev · Nov 7, 2023 · 66f05d8 · 66f05d8
1 parent 9bcc42e
commit 66f05d8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -9,7 +9,6 @@ import {
   DirectionProvider,
   useDirection,
 } from '@mantine/core';
-import { Notifications } from '@mantine/notifications';
 import { theme } from '../docs/theme';
 
 export const parameters = { layout: 'fullscreen' };
@@ -45,7 +44,6 @@ function DirectionWrapper({ children }: { children: React.ReactNode }) {
       >
         {dir === 'ltr' ? <IconTextDirectionLtr /> : <IconTextDirectionRtl />}
       </ActionIcon>
-      <Notifications />
       {children}
     </>
   );

diff --git a/src/mantine-notifications/src/Notifications.story.tsx b/src/mantine-notifications/src/Notifications.story.tsx
@@ -8,7 +8,7 @@ export default { title: 'Notifications' };
 export function Usage() {
   return (
     <div style={{ padding: 40 }}>
-      <Notifications autoClose={false} position="top-center" />
+      <Notifications autoClose={false} position="top-center" limit={1} />
 
       <Group>
         <Button

diff --git a/src/mantine-notifications/src/Notifications.tsx b/src/mantine-notifications/src/Notifications.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   Transition as _Transition,
   TransitionGroup,
@@ -182,6 +182,10 @@ export const Notifications = factory<NotificationsFactory>((_props, ref) => {
     varsResolver,
   });
 
+  useEffect(() => {
+    store?.updateState((current) => ({ ...current, limit: limit || 5 }));
+  }, [limit]);
+
   useDidUpdate(() => {
     if (data.notifications.length > previousLength.current) {
       setTimeout(() => forceUpdate(), 0);