@ttoss/google-maps 2.0.3 → 2.0.5

package/README.md

@@ -7,7 +7,7 @@
 Install `@ttoss/google-maps` in your project:
 
 ```shell
-$ pnpm install @ttoss/google-maps
+$ pnpm add @ttoss/google-maps
 ```
 
 If you use TypeScript, add the following to a declaration file (generally `typings.d.ts`):
@@ -16,7 +16,9 @@ If you use TypeScript, add the following to a declaration file (generally `typin
 /// <reference types="google.maps" />
 ```
 
-## Configuring `GoogleMapsProvider`
+## Usage
+
+### Configuring `GoogleMapsProvider`
 
 At the root of your application, configure `GoogleMapsProvider` with your Google Maps API key. This way, the whole application can access the `google` variable.
 
@@ -34,7 +36,7 @@ const App = ({ children }) => {
 };
 ```
 
-## Rendering the Map
+### Rendering the Map
 
 At the component level, render Google Maps using `useMap` hook:
 
@@ -46,7 +48,12 @@ const MyComponent = () => {
   const { ref, map } = useMap();
 
   React.useEffect(() => {
-    // You have access to every map methods, like `setOptions`, through `map`.
+    if (map) {
+      map.setOptions({
+        center: { lat: -34.397, lng: 150.644 },
+        zoom: 8,
+      });
+    }
   }, [map]);
 
   return (
@@ -57,3 +64,21 @@ const MyComponent = () => {
   );
 };
 ```
+
+If everything is set up correctly, you should see a map centered at the specified coordinates.
+
+### Retrieve `google.maps` object
+
+If you need to access the `google.maps` object, you can use the `useGoogleMaps` hook:
+
+```tsx
+import { useGoogleMaps } from '@ttoss/google-maps';
+
+const MyComponent = () => {
+  const { google } = useGoogleMaps();
+
+  return <Text>{google.maps.version}</Text>;
+};
+```
+
+With this, you can perform any operation that the `google.maps` object allows, such as creating markers, drawing polygons, etc.

package/dist/esm/index.js

@@ -6,7 +6,9 @@ import { useScript } from "@ttoss/react-hooks";
 import { jsx } from "react/jsx-runtime";
 var GoogleMapsContext = React.createContext({
   status: "idle",
-  googleMaps: null
+  google: {
+    maps: null
+  }
 });
 var GoogleMapsProvider = ({
   children,
@@ -27,48 +29,68 @@ var GoogleMapsProvider = ({
   const {
     status
   } = useScript(src);
-  const googleMaps = React.useMemo(() => {
-    if (status === "ready" && window.google.maps) {
-      return window.google.maps;
+  const google = React.useMemo(() => {
+    if (status === "ready" && window.google) {
+      return window.google;
     }
     return null;
   }, [status]);
   const value = React.useMemo(() => {
-    if (status === "ready" && googleMaps) {
+    if (status === "ready" && google?.maps) {
       return {
         status,
-        googleMaps
+        google: {
+          maps: google.maps
+        }
       };
     }
     return {
       status,
-      googleMaps: null
+      google: {
+        maps: null
+      }
     };
-  }, [googleMaps, status]);
+  }, [google, status]);
   return /* @__PURE__ */jsx(GoogleMapsContext.Provider, {
     value,
     children
   });
 };
+
+// src/useGeocoder.ts
+import * as React3 from "react";
+
+// src/useGoogleMaps.ts
+import * as React2 from "react";
 var useGoogleMaps = () => {
-  return React.useContext(GoogleMapsContext);
+  const {
+    status,
+    google
+  } = React2.useContext(GoogleMapsContext);
+  return {
+    status,
+    google,
+    /**
+     * @deprecated Use google.maps instead.
+     */
+    googleMaps: google.maps
+  };
 };
 
 // src/useGeocoder.ts
-import * as React2 from "react";
 var useGeocoder = () => {
   const {
-    googleMaps
+    google
   } = useGoogleMaps();
-  const [isGeocoderInitialized, setIsGeocoderInitialized] = React2.useState(false);
-  const geocoder = React2.useMemo(() => {
-    if (googleMaps) {
-      const googleMapsGeocoder = new googleMaps.Geocoder();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React3.useState(false);
+  const geocoder = React3.useMemo(() => {
+    if (google.maps) {
+      const googleMapsGeocoder = new google.maps.Geocoder();
       setIsGeocoderInitialized(true);
       return googleMapsGeocoder;
     }
     return null;
-  }, [googleMaps]);
+  }, [google.maps]);
   return {
     geocoder,
     isGeocoderInitialized
@@ -76,26 +98,26 @@ var useGeocoder = () => {
 };
 
 // src/useMap.ts
-import * as React3 from "react";
+import * as React4 from "react";
 import { useCallbackRef } from "use-callback-ref";
 var useMap = (options = {}) => {
-  const [, forceUpdate] = React3.useState(0);
+  const [, forceUpdate] = React4.useState(0);
   const ref = useCallbackRef(null, () => {
     return forceUpdate(n => {
       return n + 1;
     });
   });
   const {
-    googleMaps
+    google
   } = useGoogleMaps();
-  const map = React3.useMemo(() => {
-    if (googleMaps && ref.current) {
-      return new googleMaps.Map(ref.current, options);
+  const map = React4.useMemo(() => {
+    if (google?.maps && ref.current) {
+      return new google.maps.Map(ref.current, options);
     }
     return null;
-  }, [googleMaps, ref.current]);
+  }, [google?.maps, ref.current]);
   const optionsStringify = JSON.stringify(options);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (map) {
       const parsedOptions = JSON.parse(optionsStringify);
       map.setOptions(parsedOptions);
@@ -103,18 +125,19 @@ var useMap = (options = {}) => {
   }, [optionsStringify, map]);
   return {
     /**
-     * asss
+     * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
      */
     map,
     /**
-     * hhhh
+     * Returns the ref object which provides access to the HTMLDivElement element
+     * that the map is rendered in.
      */
     ref
   };
 };
 
 // src/usePlacesAutocomplete/index.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import * as React5 from "react";
 
 // src/usePlacesAutocomplete/debounce.ts
 var debounce = (fn, delay) => {
@@ -148,63 +171,69 @@ var usePlacesAutocomplete = ({
   defaultValue = "",
   initOnMount = true
 } = {}) => {
-  const [ready, setReady] = useState3(false);
-  const [value, setVal] = useState3(defaultValue);
-  const [suggestions, setSuggestions] = useState3({
+  const [ready, setReady] = React5.useState(false);
+  const [value, setVal] = React5.useState(defaultValue);
+  const [suggestions, setSuggestions] = React5.useState({
     loading: false,
     status: "",
     data: []
   });
-  const asRef = useRef2(null);
+  const asRef = React5.useRef(null);
   const requestOptionsRef = useLatest_default(requestOptions);
   const {
-    googleMaps
+    google
   } = useGoogleMaps();
-  const googleMapsRef = useLatest_default(googleMaps);
+  const googleMapsRef = useLatest_default(google.maps);
   const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
-  const init = useCallback(() => {
-    if (asRef.current) return;
-    if (!googleMaps) {
+  const init = React5.useCallback(() => {
+    if (asRef.current) {
+      return;
+    }
+    if (!google.maps) {
       return;
     }
     const {
       current: gMaps
     } = googleMapsRef;
-    const placesLib = gMaps?.places || googleMaps.places;
+    const placesLib = gMaps?.places || google.maps.places;
     if (!placesLib) {
       return;
     }
     asRef.current = new placesLib.AutocompleteService();
     setReady(true);
-  }, [googleMaps]);
-  const clearSuggestions = useCallback(() => {
+  }, [google.maps]);
+  const clearSuggestions = React5.useCallback(() => {
     setSuggestions({
       loading: false,
       status: "",
       data: []
     });
   }, []);
-  const clearCache = useCallback(() => {
+  const clearCache = React5.useCallback(() => {
     try {
       sessionStorage.removeItem(upaCacheKey);
     } catch (error) {}
   }, []);
-  const fetchPredictions = useCallback(debounce_default(val => {
+  const fetchPredictions = React5.useCallback(debounce_default(val => {
     if (!val) {
       clearSuggestions();
       return;
     }
-    setSuggestions(prevState => ({
-      ...prevState,
-      loading: true
-    }));
+    setSuggestions(prevState => {
+      return {
+        ...prevState,
+        loading: true
+      };
+    });
     let cachedData = {};
     try {
       cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || "{}");
     } catch (error) {}
     if (cache) {
       cachedData = Object.keys(cachedData).reduce((acc, key) => {
-        if (cachedData[key].maxAge - Date.now() >= 0) acc[key] = cachedData[key];
+        if (cachedData[key].maxAge - Date.now() >= 0) {
+          acc[key] = cachedData[key];
+        }
         return acc;
       }, {});
       if (cachedData[val]) {
@@ -236,21 +265,27 @@ var usePlacesAutocomplete = ({
       }
     });
   }, debounce2), [debounce2, clearSuggestions]);
-  const setValue = useCallback((val, shouldFetchData = true) => {
+  const setValue = React5.useCallback((val, shouldFetchData = true) => {
     setVal(val);
-    if (asRef.current && shouldFetchData) fetchPredictions(val);
+    if (asRef.current && shouldFetchData) {
+      fetchPredictions(val);
+    }
   }, [fetchPredictions]);
-  useEffect2(() => {
+  React5.useEffect(() => {
     if (!initOnMount) {
-      return () => null;
+      return () => {
+        return null;
+      };
     }
-    if (!googleMapsRef.current && !googleMaps && callbackName) {
+    if (!googleMapsRef.current && !google.maps && callbackName) {
       window[callbackName] = init;
     } else {
       init();
     }
     return () => {
-      if (window[callbackName]) delete window[callbackName];
+      if (window[callbackName]) {
+        delete window[callbackName];
+      }
     };
   }, [callbackName, init]);
   return {

package/dist/index.d.ts

@@ -1,11 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { ScriptStatus } from '@ttoss/react-hooks';
 
-type Extends<T, U extends T> = U;
 type GoogleMaps = typeof google.maps;
-type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
-type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
 type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
 declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
     children: React.ReactNode;
@@ -16,18 +12,6 @@ declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
      */
     language?: string;
 }) => react_jsx_runtime.JSX.Element;
-/**
- *
- * @returns param.googleMaps: GoogleMaps - returns the google maps object which
- * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
- */
-declare const useGoogleMaps: () => {
-    status: LoadedMapsStatus;
-    googleMaps: GoogleMaps;
-} | {
-    status: NotLoadedMapStatus;
-    googleMaps: null;
-};
 
 declare const useGeocoder: () => {
     geocoder: google.maps.Geocoder | null;
@@ -36,11 +20,12 @@ declare const useGeocoder: () => {
 
 declare const useMap: (options?: google.maps.MapOptions) => {
     /**
-     * asss
+     * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
      */
     map: google.maps.Map | null;
     /**
-     * hhhh
+     * Returns the ref object which provides access to the HTMLDivElement element
+     * that the map is rendered in.
      */
     ref: React.MutableRefObject<HTMLDivElement | null>;
 };
@@ -75,4 +60,23 @@ interface HookReturn {
 }
 declare const usePlacesAutocomplete: ({ requestOptions, debounce, cache, cacheKey, callbackName, defaultValue, initOnMount, }?: HookArgs) => HookReturn;
 
+/**
+ * Returns the status of the Google Maps API and the google object which
+ * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
+ *
+ * @returns An object containing the API status and the google object.
+ */
+declare const useGoogleMaps: () => {
+    status: "idle" | "loading" | "ready" | "error";
+    google: {
+        maps: GoogleMaps;
+    } | {
+        maps: null;
+    };
+    /**
+     * @deprecated Use google.maps instead.
+     */
+    googleMaps: typeof google.maps | null;
+};
+
 export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "2.0.3",
+  "version": "2.0.5",
+  "license": "MIT",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)",
@@ -23,8 +24,8 @@
     "src"
   ],
   "dependencies": {
-    "@types/google.maps": "^3.54.10",
-    "use-callback-ref": "^1.3.0",
+    "@types/google.maps": "^3.58.1",
+    "use-callback-ref": "^1.3.2",
     "@ttoss/react-hooks": "^2.0.3"
   },
   "peerDependencies": {
@@ -36,8 +37,8 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/config": "^1.34.0",
-    "@ttoss/test-utils": "^2.1.16"
+    "@ttoss/test-utils": "^2.1.16",
+    "@ttoss/config": "^1.34.0"
   },
   "keywords": [
     "Google",

package/src/GoogleMapsProvider.tsx

@@ -9,18 +9,24 @@ type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
 
 type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
 
-const GoogleMapsContext = React.createContext<
+export const GoogleMapsContext = React.createContext<
   | {
       status: LoadedMapsStatus;
-      googleMaps: GoogleMaps;
+      google: {
+        maps: GoogleMaps;
+      };
     }
   | {
       status: NotLoadedMapStatus;
-      googleMaps: null;
+      google: {
+        maps: null;
+      };
     }
 >({
   status: 'idle',
-  googleMaps: null,
+  google: {
+    maps: null,
+  },
 });
 
 type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
@@ -55,27 +61,31 @@ export const GoogleMapsProvider = ({
 
   const { status } = useScript(src);
 
-  const googleMaps = React.useMemo(() => {
-    if (status === 'ready' && window.google.maps) {
-      return window.google.maps;
+  const google = React.useMemo(() => {
+    if (status === 'ready' && window.google) {
+      return window.google;
     }
 
     return null;
   }, [status]);
 
   const value = React.useMemo(() => {
-    if (status === 'ready' && googleMaps) {
+    if (status === 'ready' && google?.maps) {
       return {
         status,
-        googleMaps,
+        google: {
+          maps: google.maps,
+        },
       };
     }
 
     return {
       status: status as NotLoadedMapStatus,
-      googleMaps: null,
+      google: {
+        maps: null,
+      },
     };
-  }, [googleMaps, status]);
+  }, [google, status]);
 
   return (
     <GoogleMapsContext.Provider value={value}>
@@ -83,12 +93,3 @@ export const GoogleMapsProvider = ({
     </GoogleMapsContext.Provider>
   );
 };
-
-/**
- *
- * @returns param.googleMaps: GoogleMaps - returns the google maps object which
- * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
- */
-export const useGoogleMaps = () => {
-  return React.useContext(GoogleMapsContext);
-};

package/src/index.ts

@@ -1,4 +1,5 @@
-export { GoogleMapsProvider, useGoogleMaps } from './GoogleMapsProvider';
+export { GoogleMapsProvider } from './GoogleMapsProvider';
 export { useGeocoder } from './useGeocoder';
 export { useMap } from './useMap';
 export { usePlacesAutocomplete } from './usePlacesAutocomplete';
+export { useGoogleMaps } from './useGoogleMaps';

package/src/useGeocoder.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { useGoogleMaps } from './GoogleMapsProvider';
+import { useGoogleMaps } from './useGoogleMaps';
 
 export const useGeocoder = () => {
-  const { googleMaps } = useGoogleMaps();
+  const { google } = useGoogleMaps();
 
   const [isGeocoderInitialized, setIsGeocoderInitialized] =
     React.useState(false);
 
   const geocoder = React.useMemo(() => {
-    if (googleMaps) {
-      const googleMapsGeocoder = new googleMaps.Geocoder();
+    if (google.maps) {
+      const googleMapsGeocoder = new google.maps.Geocoder();
       setIsGeocoderInitialized(true);
       return googleMapsGeocoder;
     }
 
     return null;
-  }, [googleMaps]);
+  }, [google.maps]);
 
   return { geocoder, isGeocoderInitialized };
 };

package/src/useGoogleMaps.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { GoogleMapsContext } from './GoogleMapsProvider';
+
+/**
+ * Returns the status of the Google Maps API and the google object which
+ * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
+ *
+ * @returns An object containing the API status and the google object.
+ */
+export const useGoogleMaps = () => {
+  const { status, google } = React.useContext(GoogleMapsContext);
+  return {
+    status,
+    google,
+    /**
+     * @deprecated Use google.maps instead.
+     */
+    googleMaps: google.maps,
+  };
+};

package/src/useMap.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useCallbackRef } from 'use-callback-ref';
-import { useGoogleMaps } from './GoogleMapsProvider';
+import { useGoogleMaps } from './useGoogleMaps';
 
 export const useMap = (options: google.maps.MapOptions = {}) => {
   /**
@@ -15,16 +15,16 @@ export const useMap = (options: google.maps.MapOptions = {}) => {
     });
   });
 
-  const { googleMaps } = useGoogleMaps();
+  const { google } = useGoogleMaps();
 
   const map = React.useMemo(() => {
-    if (googleMaps && ref.current) {
-      return new googleMaps.Map(ref.current, options);
+    if (google?.maps && ref.current) {
+      return new google.maps.Map(ref.current, options);
     }
 
     return null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [googleMaps, ref.current]);
+  }, [google?.maps, ref.current]);
 
   /**
    * To avoid re-initializing the map because shallow object comparison.
@@ -44,11 +44,12 @@ export const useMap = (options: google.maps.MapOptions = {}) => {
 
   return {
     /**
-     * asss
+     * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
      */
     map,
     /**
-     * hhhh
+     * Returns the ref object which provides access to the HTMLDivElement element
+     * that the map is rendered in.
      */
     ref,
   };