react-notify-sdk 1.0.20 → 1.0.22

package/dist/NotifyMessage.js

@@ -1,7 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 const NotificationMessage = ({ message }) => {
     return (_jsxs("div", { style: {
             width: '100%',
@@ -16,7 +13,7 @@ const NotificationMessage = ({ message }) => {
                     width: '100%',
                     display: 'flex',
                     flexDirection: 'row'
-                }, children: [message?.type === 'Information' && _jsx(InfoOutlineIcon, { fontSize: 'medium', sx: { color: '#4983c9' } }), message?.type === 'Warning' && _jsx(WarningAmberIcon, { fontSize: 'medium', sx: { color: '#ffbf00' } }), message?.type === 'Error' && _jsx(HighlightOffIcon, { fontSize: 'medium', sx: { color: '#d0342c' } }), _jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}] ml-3`, style: {
+                }, children: [message?.type === 'Information' && _jsx("p", { className: 'text-lg', style: { fontSize: '1.125rem' }, children: "\uD83D\uDCA1" }), message?.type === 'Warning' && _jsx("p", { className: 'text-lg', style: { fontSize: '1.125rem' }, children: "\u26A0\uFE0F" }), message?.type === 'Error' && _jsx("p", { className: 'text-lg', style: { fontSize: '1.125rem' }, children: "\u203C\uFE0F" }), _jsx("p", { className: `text-lg font-semibold text-[${message?.textColor}] ml-3`, style: {
                             fontSize: '1.125rem', // text-lg = 18px = 1.125rem
                             fontWeight: 600, // font-semibold = 600
                             color: `${message?.textColor}`,

package/dist/NotifyProvider.d.ts

@@ -1,2 +1,2 @@
 import { NotifyMessageProviderProps } from './types';
-export declare const NotifyProvider: ({ projectId, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NotifyProvider: ({ projectKey, onClear, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/NotifyProvider.js

@@ -19,7 +19,7 @@ const routeMatches = (pattern, path) => {
         return false;
     }
 };
-export const NotifyProvider = ({ projectId,
+export const NotifyProvider = ({ projectKey, onClear,
 //className,
 //style,
 //disableDefaultStyles = true,
@@ -28,6 +28,10 @@ export const NotifyProvider = ({ projectId,
     const [visible, setVisible] = useState(false);
     const location = useLocation();
     const device = useDeviceDetection();
+    const clearMessage = () => {
+        setVisible(false);
+        setMessage(null);
+    };
     useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
@@ -35,7 +39,7 @@ export const NotifyProvider = ({ projectId,
             const { data } = await supabase
                 .from('feature_messages')
                 .select('*')
-                .eq('project_key', projectId)
+                .eq('project_key', projectKey)
                 .eq('route', location.pathname)
                 .eq('is_active', true)
                 .order('created_at', { ascending: false });
@@ -61,7 +65,7 @@ export const NotifyProvider = ({ projectId,
             table: 'feature_messages',
         }, (payload) => {
             const msg = payload.new;
-            if (msg.project_key === projectId && msg.is_active && routeMatches(msg.route, location.pathname)) {
+            if (msg.project_key === projectKey && msg.is_active && routeMatches(msg.route, location.pathname)) {
                 setMessage(msg);
                 setVisible(true);
             }
@@ -71,10 +75,13 @@ export const NotifyProvider = ({ projectId,
             }
         })
             .subscribe();
+        if (onClear) {
+            clearMessage;
+        }
         return () => {
             supabase.removeChannel(subscription);
         };
-    }, [location.pathname, projectId]);
+    }, [location.pathname, projectKey, onClear]);
     if (!message)
         return null;
     //const defaultClasses = `absolute ${message?.position}-6 left-1/2 transform -translate-x-1/2 z-20 w-full md:w-[${message?.width}%] px-3 py-1 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;

package/dist/types.d.ts

@@ -16,7 +16,6 @@ export type NotifyMessage = {
     type: string;
 };
 export type NotifyMessageProviderProps = {
-    projectId: string;
-    className?: string;
-    disableDefaultStyles?: boolean;
+    projectKey: string;
+    onClear: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,14 +17,12 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.50.0",
     "clsx": "^2.1.1",
-    "goober": "^2.1.16",
-    "heroicons": "^1.0.6"
+    "goober": "^2.1.16"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
     "@types/react-router-dom": "^5.3.3",
-    "typescript": "^5.8.3",
-    "@mui/icons-material": "^7.2.0"
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": "^19.1.0",