Notification handler hook to display messages

packages/components/package.json

@@ -39,6 +39,7 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
     "mui-datatables": "^4.3.0",
+    "notistack": "^3.0.1",
     "tsconfig": "workspace:^",
     "tsup": "^7.2.0",
     "typescript": "^5.0.2"

packages/components/src/custom/Helpers/Dimension/index.tsx

@@ -1 +1,3 @@
-export { useWindowDimensions } from './windowSize';
+import { useWindowDimensions } from './windowSize';
+
+export { useWindowDimensions };

packages/components/src/custom/Helpers/Dimension/windowSize.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * Returns the width and height of the window.
  *

packages/components/src/custom/Helpers/Notification/index.tsx

@@ -0,0 +1,3 @@
+import useNotificationHandler from './notification-handler';
+
+export { useNotificationHandler };

packages/components/src/custom/Helpers/Notification/notification-handler.ts

@@ -0,0 +1,27 @@
+import { OptionsObject, useSnackbar } from 'notistack';
+import { useEffect, useState } from 'react';
+
+type NotificationHandler = (message: string, options?: OptionsObject) => void;
+
+const useNotificationHandler = (): NotificationHandler => {
+  const [message, setMessage] = useState<string>('');
+  const { enqueueSnackbar } = useSnackbar();
+
+  useEffect(() => {
+    if (message) {
+      enqueueSnackbar(message);
+      setMessage('');
+    }
+  }, [message, enqueueSnackbar]);
+
+  const notify: NotificationHandler = (message, options) => {
+    setMessage(message);
+    if (options) {
+      enqueueSnackbar(message, options);
+    }
+  };
+
+  return notify;
+};
+
+export default useNotificationHandler;

packages/components/src/custom/Helpers/readme.md

@@ -16,6 +16,12 @@ This directory contains a collection of utility and helper components that you c
    - **Usage**: Provides the `useWindowDimensions` hook, which allows you to get the current window dimensions and react to changes in window size.
    - **Returns**: An object containing the current window dimensions and a boolean value indicating whether the window is currently in landscape mode.
 
+2. **Notification Hook**: A custom React hook for displaying notifications using notistack.
+
+   - **File**: `Notification`
+   - **Usage**: Provides the `useNotificationHandler` hook, which allows you to display notifications.
+   - **Returns**: An object containing the notification state and a function for updating the notification state.
+
 ## How to Use
 
 To use these helper components in your project, follow these steps:
@@ -24,6 +30,31 @@ To use these helper components in your project, follow these steps:
 
 2. Import the required helper component into your code:
 
-   ```javascript
-   import { useWindowDimensions } from './helpers';
-   ```
+- **Example**: Importing the `useWindowDimensions` hook from the `Dimension` helper component:
+
+  ```javascript
+  import { useWindowDimensions } from '@layer5/sistent-components';
+  const DimensionExample = () => {
+  const { width, height } = useWindowDimensions();
+
+  return (
+   <div>
+    <p>Window width: {width}</p>
+    <p>Window height: {height}</p>
+   </div>
+  );
+  ```
+
+  - **Example**: Importing the `useNotificationHandler` hook from the `Notification` helper component:
+
+  ```javascript
+  import useNotificationHandler from '@layer5/sistent-components';
+  const NotificationHandlerExample = () => {
+  const notify = useNotificationHandler();
+
+  return (
+   <button onClick={() => notify('Hello world!', { variant: 'success' })}>
+    Click me
+   </button>
+  );
+  ```

packages/components/src/custom/index.tsx

@@ -1,5 +1,7 @@
 // import { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';
 import { StyledDialog, StyledDialogActions, StyledDialogContent } from './Dialog';
+import { useWindowDimensions } from './Helpers/Dimension';
+import { useNotificationHandler } from './Helpers/Notification';
 import CustomColumnVisibilityControl from './Toolbar/custom-column';
 import UniversalFilter from './Toolbar/custom-filter';
 import SearchBar from './Toolbar/custom-search';
@@ -14,5 +16,7 @@ export {
   StyledDialogActions,
   StyledDialogContent,
   StyledTooltip,
-  UniversalFilter
+  UniversalFilter,
+  useNotificationHandler,
+  useWindowDimensions
 };

yarn.lock

@@ -909,6 +909,7 @@ __metadata:
     eslint: ^8.45.0
     eslint-plugin-react: ^7.33.2
     mui-datatables: ^4.3.0
+    notistack: ^3.0.1
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
     tsconfig: "workspace:^"
@@ -3188,7 +3189,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.0.4, clsx@npm:^1.1.1":
+"clsx@npm:^1.0.4, clsx@npm:^1.1.0, clsx@npm:^1.1.1":
   version: 1.2.1
   resolution: "clsx@npm:1.2.1"
   checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
@@ -5256,6 +5257,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"goober@npm:^2.0.33":
+  version: 2.1.13
+  resolution: "goober@npm:2.1.13"
+  peerDependencies:
+    csstype: ^3.0.10
+  checksum: 0c00b90d26d1a2fad432e311fd4f47bc9fef1eee2a733158d9e2c72a89cf76d414090d063a8d20fe378f2b2b8087df0a83b0f00a3244d1466b97a0d3b14344a7
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -7453,6 +7463,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"notistack@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "notistack@npm:3.0.1"
+  dependencies:
+    clsx: ^1.1.0
+    goober: ^2.0.33
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 421c970308690b8c8cb2e275e7f66020db7c1955e104f638e7fa562396a6b9322ff95f0e62492b07f3d36b0ef72adb4de2c2ce9803089c1c8f028d1a3b088e01
+  languageName: node
+  linkType: hard
+
 "npm-bundled@npm:^1.1.2":
   version: 1.1.2
   resolution: "npm-bundled@npm:1.1.2"