@ttoss/google-maps 2.0.6 → 2.0.7

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) {

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.7",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -36,8 +36,8 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/config": "^1.34.1",
-    "@ttoss/test-utils": "^2.1.17"
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/config": "^1.34.1"
   },
   "keywords": [
     "Google",