react-notify-sdk 1.0.11 → 1.0.13

package/dist/NotifyProvider.js

@@ -4,12 +4,14 @@ import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 import { supabase } from './supabase/supabaseClient';
+import useDeviceDetection from './UseDeviceDetection';
 export const NotifyProvider = ({ projectId, 
 //className,
 //style,
 disableDefaultStyles = false, }) => {
     const [message, setMessage] = useState(null);
     const location = useLocation();
+    const device = useDeviceDetection();
     useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
@@ -45,19 +47,23 @@ disableDefaultStyles = false, }) => {
     }, [location.pathname, projectId]);
     if (!message)
         return null;
-    const defaultClasses = `absolute ${message?.position}-4 left-1/2 transform -translate-x-1/2 z-50 w-[${message?.width}%] px-3 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;
-    return (_jsxs("div", { className: clsx(!disableDefaultStyles && defaultClasses), style: disableDefaultStyles ?
+    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`;
+    return (_jsxs("div", { className: clsx(!disableDefaultStyles && defaultClasses), style: !disableDefaultStyles ?
             {
                 position: 'absolute',
-                top: message?.position === 'top' ? '16px' : undefined,
-                bottom: message?.position === 'top' ? undefined : '16px',
+                top: message?.position === 'top' ? '24px' : undefined,
+                bottom: message?.position === 'bottom' ? '24px' : undefined,
                 left: '50%',
                 transform: 'translateX(-50%)',
-                zIndex: 50,
-                width: `${message?.width}%`,
-                padding: '1rem', // p-4 = 1rem
+                zIndex: 20,
+                width: device === 'Mobile' ? '100%' : device === 'Tablet' ? '80%' : `${message?.width}%`,
+                paddingTop: '4px', // p-4 = 1rem
+                paddingBottom: '4px',
+                paddingLeft: '12px',
+                paddingRight: '12px',
                 backgroundColor: message?.backgroundColor,
                 border: `1px solid ${message?.textColor}`, // Completed border style
+                borderRadius: "8px"
             }
             :
                 {}, children: [_jsx("strong", { className: `block mb-2 text-lg font-semibold text-[${message?.textColor}]`, style: {
@@ -65,7 +71,7 @@ disableDefaultStyles = false, }) => {
                     marginBottom: '0.5rem', // mb-2 = 0.5rem
                     fontSize: '1.125rem', // text-lg = 18px = 1.125rem
                     fontWeight: 600, // font-semibold = 600
-                    color: `${message?.backgroundColor}`,
+                    color: `${message?.textColor}`,
                 }, children: message.title }), _jsx("p", { className: `text-sm text-[${message?.textColor}]`, style: {
                     fontSize: '0.875rem', // text-sm = 14px = 0.875rem
                     color: `${message?.textColor}`,

package/dist/UseDeviceDetection.d.ts

@@ -0,0 +1,2 @@
+declare const useDeviceDetection: () => string;
+export default useDeviceDetection;

package/dist/UseDeviceDetection.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+const useDeviceDetection = () => {
+    const [device, setDevice] = useState('');
+    useEffect(() => {
+        const handleDeviceDetection = () => {
+            const userAgent = navigator.userAgent.toLowerCase();
+            const isMobile = /iphone|ipad|ipod|android|blackberry|windows phone/g.test(userAgent);
+            const isTablet = /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);
+            if (isMobile) {
+                setDevice('Mobile');
+            }
+            else if (isTablet) {
+                setDevice('Tablet');
+            }
+            else {
+                console.log("Device is a desktop");
+                setDevice('Desktop');
+            }
+        };
+        handleDeviceDetection();
+        window.addEventListener('resize', handleDeviceDetection);
+        return () => {
+            window.removeEventListener('resize', handleDeviceDetection);
+        };
+    }, []);
+    return device;
+};
+export default useDeviceDetection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",