Merge pull request #224 from GorillaDevq/feat/useBluetooth

[feat]: useBluetooth

Author: debabin

package.json

@@ -81,6 +81,7 @@
     "@types/node": "^22.13.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.2",
+    "@types/web-bluetooth": "^0.0.20",
     "comment-parser": "^1.4.1",
     "core-js": "^3.40.0",
     "doctrine": "^3.0.0",

src/hooks/index.ts

@@ -110,4 +110,4 @@ export * from './useWindowEvent/useWindowEvent';
 export * from './useWindowFocus/useWindowFocus';
 export * from './useWindowScroll/useWindowScroll';
 export * from './useWindowSize/useWindowSize';
-export * from './useWizard/useWizard';
+export * from './useWizard/useWizard';

src/hooks/useBluetooth/useBluetooth.demo.tsx

@@ -0,0 +1,28 @@
+import { useBluetooth } from './useBluetooth';
+
+const Demo = () => {
+  const { isSupported, requestDevice, error } = useBluetooth({
+    acceptAllDevices: true
+  });
+
+  if (!isSupported) {
+    return (
+      <p>
+        Bluetooth Web API:
+        <code>not supported</code>
+      </p>
+    );
+  }
+
+  return (
+    <>
+      <p>
+        Bluetooth Web API: <code>supported</code>
+      </p>
+      <button onClick={requestDevice}>Click</button>
+      <p>{error && `Error: ${error}`}</p>
+    </>
+  );
+};
+
+export default Demo;

src/hooks/useBluetooth/useBluetooth.ts

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from 'react';
+
+/** State for hook UseBluetooth */
+export interface UseBluetoothReturn {
+  /** Indicates if Bluetooth API is supported by the browser */
+  isSupported: boolean;
+  /** Indicates if Bluetooth device is currently connected */
+  isConnected: boolean;
+  /** Describe connected Bluetooth device */
+  device: BluetoothDevice | undefined;
+  /** Function to request Bluetooth device from the user */
+  requestDevice: () => Promise<void>;
+  /** The GATT server for connected Bluetooth device */
+  server: BluetoothRemoteGATTServer | undefined;
+  /** Any error that may have occurred */
+  error: string | null;
+}
+
+/** Params for useBluetooth hook */
+export interface UseBluetoothOptions {
+  /** If true, hook will request all available Bluetooth devices */
+  acceptAllDevices?: boolean;
+  /** Array of filters to apply when scanning Bluetooth devices */
+  filters?: BluetoothLEScanFilter[] | undefined;
+  /** Array of optional services that the application can use */
+  optionalServices?: BluetoothServiceUUID[] | undefined;
+}
+
+/**
+ * @name useBluetooth
+ * @description - Hook for getting information about bluetooth
+ * @category Browser
+ *
+ * @param {boolean} [options.acceptAllDevices=false] The options to request all Bluetooth devices
+ * @param {Array<keyof BluetoothLEScanFilter>} [options.filters=undefined] Array of filters to apply when scanning Bluetooth devices
+ * @param {Array<keyof BluetoothServiceUUID>} [options.optionalServices=undefined] Array of optional services that the application can use
+ * @returns {UseBluetoothReturn} Object containing battery information & Battery API support
+ *
+ * @example
+ * const { isSupported, requestDevice } = useBluetooth({ acceptAllDevices: true });
+ */
+
+export const useBluetooth = (options?: UseBluetoothOptions): UseBluetoothReturn => {
+  const {
+    acceptAllDevices = false,
+    filters = undefined,
+    optionalServices = undefined
+  } = options || {};
+
+  const [isSupported, setIsSupported] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [device, setDevice] = useState<BluetoothDevice | undefined>(undefined);
+  const [server, setServer] = useState<BluetoothRemoteGATTServer | undefined>(undefined);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setIsSupported(navigator && 'bluetooth' in navigator);
+  }, [navigator]);
+
+  const requestDevice = useCallback(async () => {
+    if (!isSupported || !navigator?.bluetooth) {
+      return;
+    }
+
+    setError(null);
+
+    try {
+      const selectedDevice = await navigator.bluetooth.requestDevice({
+        acceptAllDevices,
+        filters,
+        optionalServices
+      });
+
+      setDevice(selectedDevice);
+    } catch (err) {
+      if (err instanceof Error) setError(err.message);
+      else setError('Unknown error');
+    }
+  }, [acceptAllDevices, filters, optionalServices, isSupported, navigator]);
+
+  // Connect to the GATT server
+  useEffect(() => {
+    const connectToBluetoothGATTServer = async () => {
+      if (device?.gatt) {
+        setError(null);
+
+        try {
+          const gattServer = await device.gatt.connect();
+          setServer(gattServer);
+          setIsConnected(gattServer.connected);
+        } catch (err) {
+          if (err instanceof Error) setError(err.message);
+          else setError('Unknown error');
+        }
+      }
+    };
+
+    if (device) {
+      device.addEventListener('gattserverdisconnected', () => setIsConnected(false));
+      connectToBluetoothGATTServer();
+
+      return () => {
+        device.removeEventListener('gattserverdisconnected', () => setIsConnected(false));
+        server?.disconnect();
+      };
+    }
+  }, [device]);
+
+  return {
+    isSupported,
+    isConnected,
+    device,
+    requestDevice,
+    server,
+    error
+  };
+};

tsconfig.json

@@ -11,7 +11,7 @@
       "@/tests": ["./tests"]
     },
     "resolveJsonModule": true,
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "@types/web-bluetooth"],
     "allowJs": true,
     "strict": true,
     "noFallthroughCasesInSwitch": true,