@ttoss/google-maps 2.0.9 → 2.1.0

package/README.md

@@ -10,13 +10,19 @@ Install `@ttoss/google-maps` in your project:
 $ pnpm add @ttoss/google-maps
 ```
 
-If you use TypeScript, add the following to a declaration file (generally `typings.d.ts`):
+If you use TypeScript, install the types for Google Maps:
+
+```shell
+$ pnpm add -D @types/google.maps
+```
+
+Then, add the following to a declaration file (generally `typings.d.ts`):
 
 ```typescript title="typings.d.ts"
 /// <reference types="google.maps" />
 ```
 
-## Usage
+## Getting Started
 
 ### Configuring `GoogleMapsProvider`
 
@@ -83,6 +89,8 @@ const MyComponent = () => {
 
 With this, you can perform any operation that the `google.maps` object allows, such as creating markers, drawing polygons, etc.
 
+## Advanced Usage
+
 ### Using with Next.js (custom Script component)
 
 If you use Next.js, you can use the `GoogleMapsProvider` passing [Next.js `Script`](https://nextjs.org/docs/app/api-reference/components/script) component as a prop:
@@ -105,6 +113,44 @@ const App = ({ children }) => {
 };
 ```
 
+### Reusing `map` object
+
+If you need to access the `map` object in multiple components, you can use `MapProvider` to share it:
+
+```tsx
+import { MapProvider, useMap } from '@ttoss/google-maps';
+
+const ChildComponent = () => {
+  // Access the map object created by the parent component
+  const { map } = useMap();
+
+  React.useEffect(() => {
+    if (map) {
+      map.setOptions({
+        center: { lat: -34.397, lng: 150.644 },
+        zoom: 8,
+      });
+    }
+  }, [map]);
+
+  return null;
+};
+
+const ParentComponent = () => {
+  const { ref, map } = useMap();
+
+  return (
+    <MapProvider map={map} ref={ref}>
+      <Box>
+        <Text>My Map</Text>
+        <Box ref={ref} sx={{ height, width }} />
+        <ChildComponent />
+      </Box>
+    </MapProvider>
+  );
+};
+```
+
 ## API
 
 ### `GoogleMapsProvider`
@@ -117,8 +163,18 @@ const App = ({ children }) => {
 - `Script`: React.ComponentType - Custom `Script` component to use.
 - `onError`: (error: Error) => void - Callback to handle script loading errors.
 
+### `MapProvider`
+
+#### Props
+
+- `map`: google.maps.Map | null - Google Maps object.
+- `children`: React.ReactNode - Children to render.
+- `ref`: React.RefObject<HTMLDivElement> - Reference to the map container.
+
 ### `useMap`
 
+`useMap` is a hook that returns a reference to the map container and the Google Maps object. It creates a new map object if it doesn't exist or returns the existing map if `MapProvider` wraps the component tree.
+
 #### Returns
 
 - `ref`: `React.RefObject<HTMLDivElement>` - Reference to the map container.
@@ -131,3 +187,7 @@ const App = ({ children }) => {
 - `google`: typeof google - `google.maps` object.
 - `status`: 'idle' | 'error' | 'loading' | 'ready' - Status of the script loading.
 - `isReady`: boolean - Whether the script is ready. The same as `status === 'ready'`.
+
+```
+
+```

package/dist/esm/index.js

@@ -27,13 +27,17 @@ var DefaultScript = ({
 var GoogleMapsProvider = ({
   children,
   apiKey,
+  loading = "async",
   libraries,
   language,
   Script = DefaultScript,
   onError
 }) => {
   const src = (() => {
-    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&loading=async`;
+    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+    if (loading) {
+      srcTemp = srcTemp + `&loading=${loading}`;
+    }
     if (libraries) {
       srcTemp = srcTemp + `&libraries=${libraries.join(",")}`;
     }
@@ -79,16 +83,39 @@ var GoogleMapsProvider = ({
   });
 };
 
+// src/MapProvider.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapContext = React2.createContext({
+  map: null,
+  ref: {
+    current: null
+  }
+});
+var MapProvider = React2.forwardRef(({
+  children,
+  map
+}, ref) => {
+  return /* @__PURE__ */jsx2(MapContext.Provider, {
+    value: {
+      map,
+      ref
+    },
+    children
+  });
+});
+MapProvider.displayName = "MapProvider";
+
 // src/useGeocoder.ts
-import * as React3 from "react";
+import * as React4 from "react";
 
 // src/useGoogleMaps.ts
-import * as React2 from "react";
+import * as React3 from "react";
 var useGoogleMaps = () => {
   const {
     status,
     google
-  } = React2.useContext(GoogleMapsContext);
+  } = React3.useContext(GoogleMapsContext);
   const isReady = status === "ready";
   return {
     isReady,
@@ -106,8 +133,8 @@ var useGeocoder = () => {
   const {
     google
   } = useGoogleMaps();
-  const [isGeocoderInitialized, setIsGeocoderInitialized] = React3.useState(false);
-  const geocoder = React3.useMemo(() => {
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = React4.useState(false);
+  const geocoder = React4.useMemo(() => {
     if (google.maps) {
       const googleMapsGeocoder = new google.maps.Geocoder();
       setIsGeocoderInitialized(true);
@@ -122,10 +149,10 @@ var useGeocoder = () => {
 };
 
 // src/useMap.ts
-import * as React4 from "react";
+import * as React5 from "react";
 import { useCallbackRef } from "use-callback-ref";
 var useMap = (options = {}) => {
-  const [, forceUpdate] = React4.useState(0);
+  const [, forceUpdate] = React5.useState(0);
   const ref = useCallbackRef(null, () => {
     return forceUpdate(n => {
       return n + 1;
@@ -135,8 +162,9 @@ var useMap = (options = {}) => {
     google,
     isReady
   } = useGoogleMaps();
-  const [map, setMap] = React4.useState(null);
-  React4.useEffect(() => {
+  const mapContext = React5.useContext(MapContext);
+  const [map, setMap] = React5.useState(mapContext.map);
+  React5.useEffect(() => {
     if (map) {
       return;
     }
@@ -152,7 +180,7 @@ var useMap = (options = {}) => {
     setMap(new google.maps.Map(ref.current, options));
   }, [map, isReady, ref, google.maps, options]);
   const optionsStringify = JSON.stringify(options);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (map) {
       const parsedOptions = JSON.parse(optionsStringify);
       map.setOptions(parsedOptions);
@@ -172,12 +200,12 @@ var useMap = (options = {}) => {
 };
 
 // src/usePlacesAutocomplete/index.ts
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/usePlacesAutocomplete/useLatest.ts
-import * as React5 from "react";
+import * as React6 from "react";
 var useLatest = val => {
-  const ref = React5.useRef(val);
+  const ref = React6.useRef(val);
   ref.current = val;
   return ref;
 };
@@ -206,21 +234,21 @@ var usePlacesAutocomplete = ({
   defaultValue = "",
   initOnMount = true
 } = {}) => {
-  const [ready, setReady] = React6.useState(false);
-  const [value, setVal] = React6.useState(defaultValue);
-  const [suggestions, setSuggestions] = React6.useState({
+  const [ready, setReady] = React7.useState(false);
+  const [value, setVal] = React7.useState(defaultValue);
+  const [suggestions, setSuggestions] = React7.useState({
     loading: false,
     status: "",
     data: []
   });
-  const asRef = React6.useRef(null);
+  const asRef = React7.useRef(null);
   const requestOptionsRef = useLatest(requestOptions);
   const {
     google
   } = useGoogleMaps();
   const googleMapsRef = useLatest(google.maps);
   const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
-  const init = React6.useCallback(() => {
+  const init = React7.useCallback(() => {
     if (asRef.current) {
       return;
     }
@@ -237,19 +265,19 @@ var usePlacesAutocomplete = ({
     asRef.current = new placesLib.AutocompleteService();
     setReady(true);
   }, [google.maps]);
-  const clearSuggestions = React6.useCallback(() => {
+  const clearSuggestions = React7.useCallback(() => {
     setSuggestions({
       loading: false,
       status: "",
       data: []
     });
   }, []);
-  const clearCache = React6.useCallback(() => {
+  const clearCache = React7.useCallback(() => {
     try {
       sessionStorage.removeItem(upaCacheKey);
     } catch (error) {}
   }, []);
-  const fetchPredictions = React6.useCallback(debounce_default(val => {
+  const fetchPredictions = React7.useCallback(debounce_default(val => {
     if (!val) {
       clearSuggestions();
       return;
@@ -300,13 +328,13 @@ var usePlacesAutocomplete = ({
       }
     });
   }, debounce2), [debounce2, clearSuggestions]);
-  const setValue = React6.useCallback((val, shouldFetchData = true) => {
+  const setValue = React7.useCallback((val, shouldFetchData = true) => {
     setVal(val);
     if (asRef.current && shouldFetchData) {
       fetchPredictions(val);
     }
   }, [fetchPredictions]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!initOnMount) {
       return () => {
         return null;
@@ -333,4 +361,4 @@ var usePlacesAutocomplete = ({
     init
   };
 };
-export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };
+export { GoogleMapsProvider, MapProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/dist/index.d.ts

@@ -8,7 +8,7 @@ type ScriptProps = {
     onReady: () => void;
     onError?: (e: Error) => void;
 };
-declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, Script, onError, }: {
+declare const GoogleMapsProvider: ({ children, apiKey, loading, libraries, language, Script, onError, }: {
     children: React.ReactNode;
     apiKey: string;
     libraries?: Libraries[];
@@ -16,10 +16,16 @@ declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, Scri
      * https://developers.google.com/maps/faq#languagesupport
      */
     language?: string;
+    loading?: "async" | false;
     Script?: React.ComponentType<ScriptProps>;
     onError?: (e: Error) => void;
 }) => react_jsx_runtime.JSX.Element;
 
+declare const MapProvider: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    map: google.maps.Map | null;
+} & React.RefAttributes<HTMLDivElement>>;
+
 declare const useGeocoder: () => {
     geocoder: google.maps.Geocoder | null;
     isGeocoderInitialized: boolean;
@@ -87,4 +93,4 @@ declare const useGoogleMaps: () => {
     googleMaps: typeof google.maps | null;
 };
 
-export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };
+export { GoogleMapsProvider, MapProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -23,7 +23,6 @@
     "dist"
   ],
   "dependencies": {
-    "@types/google.maps": "^3.58.1",
     "use-callback-ref": "^1.3.2",
     "@ttoss/react-hooks": "^2.0.4"
   },
@@ -32,6 +31,7 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@types/google.maps": "^3.58.1",
     "@types/react": "^18.3.7",
     "jest": "^29.7.0",
     "react": "^18.3.1",