feat(usegeolocated): add support to watch location permission change

no23reason · Apr 29, 2023 · ca1fdd2 · ca1fdd2
1 parent 474f6cd
commit ca1fdd2
Showing 1 changed file with 35 additions and 1 deletion.
diff --git a/src/index.ts b/src/index.ts
@@ -33,6 +33,11 @@ export interface GeolocatedConfig {
      * @default true
      */
     isOptimisticGeolocationEnabled?: boolean;
+    /**
+     * If set to true, the component watches for location permission changes.
+     * @default false
+     */
+    watchLocationPermissionChange?: boolean;
     /**
      * Callback to call when geolocation API invocation fails. Called with undefined when the user decision times out.
      */
@@ -91,6 +96,7 @@ export function useGeolocated(config: GeolocatedConfig = {}): GeolocatedResult {
         geolocationProvider = typeof navigator !== "undefined"
             ? navigator.geolocation
             : undefined,
+        watchLocationPermissionChange = false,
         onError,
         onSuccess,
     } = config;
@@ -108,6 +114,9 @@ export function useGeolocated(config: GeolocatedConfig = {}): GeolocatedResult {
     const [positionError, setPositionError] = useState<
         GeolocationPositionError | undefined
     >();
+    const [permissionState, setPermissionState] = useState<
+        PermissionState | undefined
+    >();
 
     const cancelUserDecisionTimeout = useCallback(() => {
         if (userDecisionTimeoutId.current) {
@@ -177,6 +186,31 @@ export function useGeolocated(config: GeolocatedConfig = {}): GeolocatedResult {
         positionOptions,
     ]);
 
+    useEffect(() => {
+        let permission: PermissionStatus;
+
+        if (
+            watchLocationPermissionChange &&
+            geolocationProvider &&
+            "permissions" in navigator
+        ) {
+            navigator.permissions
+                .query({ name: "geolocation" })
+                .then((result) => {
+                    permission = result;
+                    permission.onchange = () => {
+                        setPermissionState(permission.state);
+                    };
+                });
+        }
+
+        return () => {
+            if (permission) {
+                permission.onchange = null;
+            }
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
     useEffect(() => {
         if (!suppressLocationOnMount) {
             getPosition();
@@ -188,7 +222,7 @@ export function useGeolocated(config: GeolocatedConfig = {}): GeolocatedResult {
                 geolocationProvider?.clearWatch(watchId.current);
             }
         };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [permissionState]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return {
         getPosition,