@ttoss/react-notifications 2.4.26 → 2.4.27

package/README.md

@@ -116,7 +116,9 @@ const Component = () => {
 
 ### NotificationsBox
 
-You can use `NotificationsBox` to show the notifications in a specific place. You can render as many `NotificationsBox` as you want in your application.
+`NotificationsBox` displays notifications in a specific area of your application. It filters and shows only notifications intended for box display.
+
+#### Basic Usage
 
 ```tsx
 import { NotificationsBox } from '@ttoss/react-notifications';
@@ -129,7 +131,13 @@ const Component = () => {
     </Box>
   );
 };
+```
+
+#### Multiple Boxes
 
+You can render multiple `NotificationsBox` components. By default, all boxes show the same notifications:
+
+```tsx
 const App = () => {
   return (
     <Box>
@@ -140,9 +148,11 @@ const App = () => {
 };
 ```
 
-In the example above, both `NotificationsBox` will show the notifications.
+Both `NotificationsBox` instances will display the same notifications.
+
+#### Box IDs
 
-To render the notifications in a specific `NotificationsBox`, you can set the `boxId` in the notification, which is the `id` of the `NotificationsBox` you want to show the notification.
+To show notifications in a specific box, use the `id` prop and set the `boxId` in the notification:
 
 ```tsx
 import { useNotifications, NotificationsBox } from '@ttoss/react-notifications';
@@ -157,7 +167,7 @@ const Component = () => {
       <Button
         onClick={() =>
           addNotification({
-            message: "I'm a notification",
+            message: "I'm a notification for my-box",
             type: 'info',
             boxId: 'my-box',
           })
@@ -170,6 +180,40 @@ const Component = () => {
 };
 ```
 
+#### Filtering Behavior
+
+`NotificationsBox` filters notifications based on these rules:
+
+1. **View Type**: Only shows notifications with `viewType: 'box'` or when `defaultViewType` is `'box'` and no `viewType` is specified
+2. **Box ID**:
+   - If the box has no `id`, it shows notifications without a `boxId`
+   - If the box has an `id`, it only shows notifications with a matching `boxId`
+3. **Direct Notifications**: You can pass notifications directly via the `notifications` prop to bypass the global state
+
+#### Direct Notifications
+
+You can pass notifications directly to a specific box, bypassing the global notification state:
+
+```tsx
+import { NotificationsBox } from '@ttoss/react-notifications';
+
+const Component = () => {
+  const localNotifications = [
+    { id: 1, message: 'Local notification', type: 'info' },
+    { id: 2, message: 'Another local one', type: 'success' },
+  ];
+
+  return <NotificationsBox notifications={localNotifications} />;
+};
+```
+
+#### Props
+
+| Prop            | Type               | Description                                                                  |
+| --------------- | ------------------ | ---------------------------------------------------------------------------- |
+| `id`            | `string \| number` | Optional identifier for the box. Used to match with `boxId` in notifications |
+| `notifications` | `Notification[]`   | Optional array of notifications to display directly, bypassing global state  |
+
 ### NotificationsHeader
 
 You can use `NotificationsHeader` to display notifications with `viewType: 'header'` in a specific place, such as your application's header. Only notifications with `viewType: 'header'` will be shown by this component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "2.4.26",
+  "version": "2.4.27",
   "description": "ttoss notifications module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -36,9 +36,9 @@
     "tsup": "^8.5.1",
     "@ttoss/components": "^2.7.4",
     "@ttoss/config": "^1.35.12",
+    "@ttoss/react-icons": "^0.5.3",
     "@ttoss/test-utils": "^3.0.4",
-    "@ttoss/ui": "^5.10.8",
-    "@ttoss/react-icons": "^0.5.3"
+    "@ttoss/ui": "^5.10.8"
   },
   "keywords": [
     "React",