@ttoss/google-maps 2.0.6 → 2.0.8

package/README.md

@@ -82,3 +82,52 @@ const MyComponent = () => {
 ```
 
 With this, you can perform any operation that the `google.maps` object allows, such as creating markers, drawing polygons, etc.
+
+### 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:
+
+```tsx
+import { GoogleMapsProvider } from '@ttoss/google-maps';
+import Script from 'next/script';
+
+const App = ({ children }) => {
+  return (
+    <OtherProviders>
+      <GoogleMapsProvider
+        apiKey={process.env.GOOGLE_MAPS_API_KEY}
+        Script={Script}
+      >
+        {children}
+      </GoogleMapsProvider>
+    </OtherProviders>
+  );
+};
+```
+
+## API
+
+### `GoogleMapsProvider`
+
+#### Props
+
+- `apiKey`: string - Google Maps API key.
+- `libraries`: string[] - [Libraries to load](https://developers.google.com/maps/documentation/javascript/libraries).
+- `language`: string - [Language](https://developers.google.com/maps/documentation/javascript/localization).
+- `Script`: React.ComponentType - Custom `Script` component to use.
+- `onError`: (error: Error) => void - Callback to handle script loading errors.
+
+### `useMap`
+
+#### Returns
+
+- `ref`: React.RefObject<HTMLDivElement> - Reference to the map container.
+- `map`: google.maps.Map | null - Google Maps object.
+
+### `useGoogleMaps`
+
+#### Returns
+
+- `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

@@ -3,18 +3,34 @@
 // src/GoogleMapsProvider.tsx
 import * as React from "react";
 import { useScript } from "@ttoss/react-hooks";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var GoogleMapsContext = React.createContext({
   status: "idle",
   google: {
     maps: null
   }
 });
+var DefaultScript = ({
+  src,
+  onReady
+}) => {
+  const {
+    status
+  } = useScript(src);
+  React.useEffect(() => {
+    if (status === "ready") {
+      onReady();
+    }
+  }, [status, onReady]);
+  return null;
+};
 var GoogleMapsProvider = ({
   children,
   apiKey,
   libraries,
-  language
+  language,
+  Script = DefaultScript,
+  onError
 }) => {
   const src = (() => {
     let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
@@ -26,9 +42,7 @@ var GoogleMapsProvider = ({
     }
     return srcTemp;
   })();
-  const {
-    status
-  } = useScript(src);
+  const [status, setStatus] = React.useState("loading");
   const google = React.useMemo(() => {
     if (status === "ready" && window.google) {
       return window.google;
@@ -51,9 +65,17 @@ var GoogleMapsProvider = ({
       }
     };
   }, [google, status]);
-  return /* @__PURE__ */jsx(GoogleMapsContext.Provider, {
-    value,
-    children
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Script, {
+      src,
+      onReady: () => {
+        return setStatus("ready");
+      },
+      onError
+    }), /* @__PURE__ */jsx(GoogleMapsContext.Provider, {
+      value,
+      children
+    })]
   });
 };
 
@@ -67,7 +89,9 @@ var useGoogleMaps = () => {
     status,
     google
   } = React2.useContext(GoogleMapsContext);
+  const isReady = status === "ready";
   return {
+    isReady,
     status,
     google,
     /**
@@ -108,14 +132,25 @@ var useMap = (options = {}) => {
     });
   });
   const {
-    google
+    google,
+    isReady
   } = useGoogleMaps();
-  const map = React4.useMemo(() => {
-    if (google?.maps && ref.current) {
-      return new google.maps.Map(ref.current, options);
+  const [map, setMap] = React4.useState(null);
+  React4.useEffect(() => {
+    if (map) {
+      return;
     }
-    return null;
-  }, [google?.maps, ref.current]);
+    if (!ref.current) {
+      return;
+    }
+    if (!isReady) {
+      return;
+    }
+    if (!google.maps) {
+      return;
+    }
+    setMap(new google.maps.Map(ref.current, options));
+  }, [map, isReady, ref, google.maps, options]);
   const optionsStringify = JSON.stringify(options);
   React4.useEffect(() => {
     if (map) {
@@ -137,7 +172,15 @@ var useMap = (options = {}) => {
 };
 
 // src/usePlacesAutocomplete/index.ts
+import * as React6 from "react";
+
+// src/usePlacesAutocomplete/useLatest.ts
 import * as React5 from "react";
+var useLatest = val => {
+  const ref = React5.useRef(val);
+  ref.current = val;
+  return ref;
+};
 
 // src/usePlacesAutocomplete/debounce.ts
 var debounce = (fn, delay) => {
@@ -153,14 +196,6 @@ var debounce = (fn, delay) => {
 };
 var debounce_default = debounce;
 
-// src/usePlacesAutocomplete/useLatest.ts
-import { useRef } from "react";
-var useLatest_default = val => {
-  const ref = useRef(val);
-  ref.current = val;
-  return ref;
-};
-
 // src/usePlacesAutocomplete/index.ts
 var usePlacesAutocomplete = ({
   requestOptions,
@@ -171,21 +206,21 @@ var usePlacesAutocomplete = ({
   defaultValue = "",
   initOnMount = true
 } = {}) => {
-  const [ready, setReady] = React5.useState(false);
-  const [value, setVal] = React5.useState(defaultValue);
-  const [suggestions, setSuggestions] = React5.useState({
+  const [ready, setReady] = React6.useState(false);
+  const [value, setVal] = React6.useState(defaultValue);
+  const [suggestions, setSuggestions] = React6.useState({
     loading: false,
     status: "",
     data: []
   });
-  const asRef = React5.useRef(null);
-  const requestOptionsRef = useLatest_default(requestOptions);
+  const asRef = React6.useRef(null);
+  const requestOptionsRef = useLatest(requestOptions);
   const {
     google
   } = useGoogleMaps();
-  const googleMapsRef = useLatest_default(google.maps);
+  const googleMapsRef = useLatest(google.maps);
   const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
-  const init = React5.useCallback(() => {
+  const init = React6.useCallback(() => {
     if (asRef.current) {
       return;
     }
@@ -202,19 +237,19 @@ var usePlacesAutocomplete = ({
     asRef.current = new placesLib.AutocompleteService();
     setReady(true);
   }, [google.maps]);
-  const clearSuggestions = React5.useCallback(() => {
+  const clearSuggestions = React6.useCallback(() => {
     setSuggestions({
       loading: false,
       status: "",
       data: []
     });
   }, []);
-  const clearCache = React5.useCallback(() => {
+  const clearCache = React6.useCallback(() => {
     try {
       sessionStorage.removeItem(upaCacheKey);
     } catch (error) {}
   }, []);
-  const fetchPredictions = React5.useCallback(debounce_default(val => {
+  const fetchPredictions = React6.useCallback(debounce_default(val => {
     if (!val) {
       clearSuggestions();
       return;
@@ -265,13 +300,13 @@ var usePlacesAutocomplete = ({
       }
     });
   }, debounce2), [debounce2, clearSuggestions]);
-  const setValue = React5.useCallback((val, shouldFetchData = true) => {
+  const setValue = React6.useCallback((val, shouldFetchData = true) => {
     setVal(val);
     if (asRef.current && shouldFetchData) {
       fetchPredictions(val);
     }
   }, [fetchPredictions]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!initOnMount) {
       return () => {
         return null;

package/dist/index.d.ts

@@ -3,7 +3,12 @@ import * as React from 'react';
 
 type GoogleMaps = typeof google.maps;
 type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
-declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
+type ScriptProps = {
+    src: string;
+    onReady: () => void;
+    onError?: (e: Error) => void;
+};
+declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, Script, onError, }: {
     children: React.ReactNode;
     apiKey: string;
     libraries?: Libraries[];
@@ -11,6 +16,8 @@ declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
      * https://developers.google.com/maps/faq#languagesupport
      */
     language?: string;
+    Script?: React.ComponentType<ScriptProps>;
+    onError?: (e: Error) => void;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const useGeocoder: () => {
@@ -67,6 +74,7 @@ declare const usePlacesAutocomplete: ({ requestOptions, debounce, cache, cacheKe
  * @returns An object containing the API status and the google object.
  */
 declare const useGoogleMaps: () => {
+    isReady: boolean;
     status: "idle" | "loading" | "ready" | "error";
     google: {
         maps: GoogleMaps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [