@ttoss/google-maps 2.0.5 → 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.5",
+  "version": "2.0.7",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -20,13 +20,12 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@types/google.maps": "^3.58.1",
     "use-callback-ref": "^1.3.2",
-    "@ttoss/react-hooks": "^2.0.3"
+    "@ttoss/react-hooks": "^2.0.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -37,8 +36,8 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/test-utils": "^2.1.16",
-    "@ttoss/config": "^1.34.0"
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/config": "^1.34.1"
   },
   "keywords": [
     "Google",

package/src/GoogleMapsProvider.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { ScriptStatus, useScript } from '@ttoss/react-hooks';
-
-type Extends<T, U extends T> = U;
-
-export type GoogleMaps = typeof google.maps;
-
-type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
-
-type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
-
-export const GoogleMapsContext = React.createContext<
-  | {
-      status: LoadedMapsStatus;
-      google: {
-        maps: GoogleMaps;
-      };
-    }
-  | {
-      status: NotLoadedMapStatus;
-      google: {
-        maps: null;
-      };
-    }
->({
-  status: 'idle',
-  google: {
-    maps: null,
-  },
-});
-
-type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
-
-export const GoogleMapsProvider = ({
-  children,
-  apiKey,
-  libraries,
-  language,
-}: {
-  children: React.ReactNode;
-  apiKey: string;
-  libraries?: Libraries[];
-  /**
-   * https://developers.google.com/maps/faq#languagesupport
-   */
-  language?: string;
-}) => {
-  const src = (() => {
-    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
-
-    if (libraries) {
-      srcTemp = srcTemp + `&libraries=${libraries.join(',')}`;
-    }
-
-    if (language) {
-      srcTemp = srcTemp + `&language=${language}`;
-    }
-
-    return srcTemp;
-  })();
-
-  const { status } = useScript(src);
-
-  const google = React.useMemo(() => {
-    if (status === 'ready' && window.google) {
-      return window.google;
-    }
-
-    return null;
-  }, [status]);
-
-  const value = React.useMemo(() => {
-    if (status === 'ready' && google?.maps) {
-      return {
-        status,
-        google: {
-          maps: google.maps,
-        },
-      };
-    }
-
-    return {
-      status: status as NotLoadedMapStatus,
-      google: {
-        maps: null,
-      },
-    };
-  }, [google, status]);
-
-  return (
-    <GoogleMapsContext.Provider value={value}>
-      {children}
-    </GoogleMapsContext.Provider>
-  );
-};

package/src/index.ts

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

package/src/typings.d.ts

@@ -1 +0,0 @@
-/// <reference types="google.maps" />

package/src/useGeocoder.ts

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

package/src/useGoogleMaps.ts

@@ -1,20 +0,0 @@
-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,56 +0,0 @@
-import * as React from 'react';
-import { useCallbackRef } from 'use-callback-ref';
-import { useGoogleMaps } from './useGoogleMaps';
-
-export const useMap = (options: google.maps.MapOptions = {}) => {
-  /**
-   * Read here for more details about the useCallbackRef hook:
-   * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
-   */
-  const [, forceUpdate] = React.useState(0);
-
-  const ref = useCallbackRef<HTMLDivElement>(null, () => {
-    return forceUpdate((n) => {
-      return n + 1;
-    });
-  });
-
-  const { google } = useGoogleMaps();
-
-  const map = React.useMemo(() => {
-    if (google?.maps && ref.current) {
-      return new google.maps.Map(ref.current, options);
-    }
-
-    return null;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [google?.maps, ref.current]);
-
-  /**
-   * To avoid re-initializing the map because shallow object comparison.
-   * https://stackoverflow.com/a/62409962/8786986
-   */
-  const optionsStringify = JSON.stringify(options);
-
-  /**
-   * Update options but not reinitialize the map.
-   */
-  React.useEffect(() => {
-    if (map) {
-      const parsedOptions = JSON.parse(optionsStringify);
-      map.setOptions(parsedOptions);
-    }
-  }, [optionsStringify, map]);
-
-  return {
-    /**
-     * Returns the map object which provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
-     */
-    map,
-    /**
-     * Returns the ref object which provides access to the HTMLDivElement element
-     * that the map is rendered in.
-     */
-    ref,
-  };
-};

package/src/usePlacesAutocomplete/debounce.ts

@@ -1,20 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const debounce = <F extends (...args: any[]) => void>(
-  fn: F,
-  delay: number
-): ((this: ThisParameterType<F>, ...args: Parameters<F>) => void) => {
-  let timer: ReturnType<typeof setTimeout> | null;
-
-  function debounceFn(this: ThisParameterType<F>, ...args: Parameters<F>) {
-    if (timer !== null) {
-      clearTimeout(timer);
-      timer = null;
-    }
-
-    timer = setTimeout(() => fn.apply(this, args), delay);
-  }
-
-  return debounceFn;
-};
-
-export default debounce;

package/src/usePlacesAutocomplete/index.ts

@@ -1,208 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import * as React from 'react';
-import { useGoogleMaps } from './../useGoogleMaps';
-import _debounce from './debounce';
-import useLatest from './useLatest';
-
-export interface HookArgs {
-  requestOptions?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
-  debounce?: number;
-  cache?: number | false;
-  cacheKey?: string;
-  callbackName?: string;
-  defaultValue?: string;
-  initOnMount?: boolean;
-}
-
-type Suggestion = google.maps.places.AutocompletePrediction;
-
-type Status = `${google.maps.places.PlacesServiceStatus}` | '';
-
-interface Suggestions {
-  readonly loading: boolean;
-  readonly status: Status;
-  data: Suggestion[];
-}
-
-interface SetValue {
-  (val: string, shouldFetchData?: boolean): void;
-}
-
-interface HookReturn {
-  ready: boolean;
-  value: string;
-  suggestions: Suggestions;
-  setValue: SetValue;
-  clearSuggestions: () => void;
-  clearCache: () => void;
-  init: () => void;
-}
-
-export const loadApiErr = '💡 Google Maps Places API library must be loaded.';
-
-export const usePlacesAutocomplete = ({
-  requestOptions,
-  debounce = 200,
-  cache = 24 * 60 * 60,
-  cacheKey,
-  callbackName,
-  defaultValue = '',
-  initOnMount = true,
-}: HookArgs = {}): HookReturn => {
-  const [ready, setReady] = React.useState(false);
-  const [value, setVal] = React.useState(defaultValue);
-  const [suggestions, setSuggestions] = React.useState<Suggestions>({
-    loading: false,
-    status: '',
-    data: [],
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const asRef = React.useRef<any>(null);
-  const requestOptionsRef = useLatest(requestOptions);
-  const { google } = useGoogleMaps();
-
-  const googleMapsRef = useLatest(google.maps);
-
-  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : 'upa';
-
-  const init = React.useCallback(() => {
-    if (asRef.current) {
-      return;
-    }
-
-    if (!google.maps) {
-      return;
-    }
-
-    const { current: gMaps } = googleMapsRef;
-    const placesLib = gMaps?.places || google.maps.places;
-
-    if (!placesLib) {
-      return;
-    }
-
-    asRef.current = new placesLib.AutocompleteService();
-    setReady(true);
-  }, [google.maps]);
-
-  const clearSuggestions = React.useCallback(() => {
-    setSuggestions({ loading: false, status: '', data: [] });
-  }, []);
-
-  const clearCache = React.useCallback(() => {
-    try {
-      sessionStorage.removeItem(upaCacheKey);
-    } catch (error) {
-      // Skip exception
-    }
-  }, []);
-
-  const fetchPredictions = React.useCallback(
-    _debounce((val: string) => {
-      if (!val) {
-        clearSuggestions();
-        return;
-      }
-
-      setSuggestions((prevState) => {
-        return { ...prevState, loading: true };
-      });
-
-      let cachedData: Record<string, { data: Suggestion[]; maxAge: number }> =
-        {};
-
-      try {
-        cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || '{}');
-      } catch (error) {
-        // Skip exception
-      }
-
-      if (cache) {
-        cachedData = Object.keys(cachedData).reduce(
-          (acc: typeof cachedData, key) => {
-            if (cachedData[key].maxAge - Date.now() >= 0) {
-              acc[key] = cachedData[key];
-            }
-            return acc;
-          },
-          {}
-        );
-
-        if (cachedData[val]) {
-          setSuggestions({
-            loading: false,
-            status: 'OK',
-            data: cachedData[val].data,
-          });
-          return;
-        }
-      }
-
-      asRef?.current?.getPlacePredictions(
-        { ...requestOptionsRef.current, input: val },
-        (data: Suggestion[] | null, status: Status) => {
-          setSuggestions({ loading: false, status, data: data || [] });
-
-          if (cache && status === 'OK') {
-            cachedData[val] = {
-              data: data as Suggestion[],
-              maxAge: Date.now() + cache * 1000,
-            };
-
-            try {
-              sessionStorage.setItem(upaCacheKey, JSON.stringify(cachedData));
-            } catch (error) {
-              // Skip exception
-            }
-          }
-        }
-      );
-    }, debounce),
-    [debounce, clearSuggestions]
-  );
-
-  const setValue: SetValue = React.useCallback(
-    (val, shouldFetchData = true) => {
-      setVal(val);
-      if (asRef.current && shouldFetchData) {
-        fetchPredictions(val);
-      }
-    },
-    [fetchPredictions]
-  );
-
-  React.useEffect(() => {
-    if (!initOnMount) {
-      // eslint-disable-next-line react/display-name
-      return () => {
-        return null;
-      };
-    }
-
-    if (!googleMapsRef.current && !google.maps && callbackName) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any)[callbackName] = init;
-    } else {
-      init();
-    }
-
-    return () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if ((window as any)[callbackName as string]) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        delete (window as any)[callbackName as string];
-      }
-    };
-  }, [callbackName, init]);
-
-  return {
-    ready,
-    value,
-    suggestions,
-    setValue,
-    clearSuggestions,
-    clearCache,
-    init,
-  };
-};

package/src/usePlacesAutocomplete/useLatest.ts

@@ -1,7 +0,0 @@
-import { RefObject, useRef } from 'react';
-
-export default <T>(val: T): RefObject<T> => {
-  const ref = useRef(val);
-  ref.current = val;
-  return ref;
-};