@ttoss/google-maps 1.14.2 → 1.14.3

package/README.md

@@ -1,251 +1,61 @@
 # @ttoss/google-maps
 
-## 📚 About
+<strong>@ttoss/google-maps</strong> is an opinionated way to use Google Maps in your React application.
 
-<strong> @ttoss/google-maps</strong> is a easiest way to use Google Maps in your React application.
+## Installing
 
-## 🚀 Get Started
-
-### Install @ttoss/google-maps
+Install `@ttoss/google-maps` in your project:
 
 ```shell
-$ yarn add
+$ yarn add @ttoss/google-maps
 # or
 $ npm install @ttoss/google-maps
 ```
 
-## 📄 Examples of use
-
-### Map
-
-```tsx
-export type MapProps = {
-  width?: number | string;
-  height?: number | string;
-  image?: Omit<MapImageOptions, 'map'>;
-  options?: google.maps.MapOptions;
-};
-
-const Map = ({ height, width, image, options }: MapProps) => {
-  const { googleMaps } = useGoogleMaps();
-
-  const [mapDivRef, setMapDivRef] = React.useState<HTMLDivElement | null>(null);
-
-  const map = React.useMemo(() => {
-    if (googleMaps && mapDivRef) {
-      const googleMapsMap = new googleMaps.Map(mapDivRef, defaultOptions);
-      return googleMapsMap;
-    }
-
-    return null;
-  }, [googleMaps, mapDivRef]);
-
-  React.useEffect(() => {
-    if (map && options?.center) {
-      map.setCenter(options.center);
-    }
-  }, [map, options?.center]);
-
-  return (
-    <div id="google-maps" ref={(r) => setMapDivRef(r)} sx={{ width, height }} />
-  );
-};
-
-Map.defaultProps = {
-  width: 400,
-  height: 300,
-} as MapProps;
+If you use TypeScript, add the following to a declaration file (generally `typings.d.ts`):
 
-export default Map;
+```typescript title="typings.d.ts"
+/// <reference types="google.maps" />
 ```
 
-### Latitude and Longitude
-
-```ts
-import { useGeocoder } from '@ttoss/google-maps';
+## Configuring `GoogleMapsProvider`
 
-type MapGeocoderResult = google.maps.GeocoderResult;
-type MapGeocoderStatus = google.maps.GeocoderStatus;
-
-export type LatLng = {
-  lat: number;
-  lng: number;
-};
-
-export const useGeocoding = () => {
-  const { geocoder } = useGeocoder();
-
-  const getLatLong = ({ address }: { address: string }): Promise<LatLng> => {
-    return new Promise((resolve, reject) => {
-      if (!geocoder) {
-        return reject(new Error('Geocoder not defined'));
-      }
-
-      geocoder.geocode(
-        { address },
-        (results: MapGeocoderResult[] | null, status: MapGeocoderStatus) => {
-          if (results && status === window.google.maps.GeocoderStatus.OK) {
-            const lat = results[0].geometry.location.lat();
-            const lng = results[0].geometry.location.lng();
-
-            return resolve({
-              lat,
-              lng,
-            });
-          } else {
-            console.log(
-              'Geocode was not successful for the following reason: ',
-              status
-            );
-            return reject(new Error('Result not found'));
-          }
-        }
-      );
-    });
-  };
-
-  return { getLatLong };
-};
-```
-
-### Providers
+At the root of your application, configure `GoogleMapsProvider` with your Google Maps API key. This way, the whole application can access the `google` variable.
 
 ```tsx
-import * as React from 'react';
-
 import { GoogleMapsProvider } from '@ttoss/google-maps';
 
-const Providers: React.FC = ({ children }) => {
-  const apiKey = 'YOUR_API_KEY';
-
-  if (!apiKey) {
-    return <>{children}</>;
-  }
-
+const App = ({ children }) => {
   return (
-    <GoogleMapsProvider apiKey={apiKey} libraries={['places']} language="pt-BR">
-      {children}
-    </GoogleMapsProvider>
+    <OtherProviders>
+      <GoogleMapsProvider apiKey={process.env.GOOGLE_MAPS_API_KEY}>
+        {children}
+      </GoogleMapsProvider>
+    </OtherProviders>
   );
 };
-
-export default Providers;
 ```
 
-### Autocomplete
-
-```tsx
-import React from 'react';
-
-import { usePlacesAutocomplete } from '@ttoss/google-maps';
-
-const Component = () => {
-  const [text, setText] = React.useState('');
-  const clearText = () => setText('');
-
-  const apiKey = 'YOUR_API_KEY';
-
-  const {
-    ready,
-    value,
-    suggestions: { status, data },
-    setValue,
-    clearSuggestions,
-  } = usePlacesAutocomplete({
-    debounce: 300,
-    cacheKey: apiKey,
-  });
-
-  const handleInput = (e: any) => {
-    setValue(e.target.value);
-  };
-
-  const handleSelect =
-    ({ description }: { description: string }) =>
-    () => {
-      setValue(description, false);
-      clearSuggestions();
-    };
-
-  const renderSuggestions = () =>
-    data.map((suggestion) => {
-      const {
-        place_id,
-        structured_formatting: { main_text, secondary_text },
-      } = suggestion;
-
-      return (
-        <li key={place_id} onClick={() => handleSelect(suggestion)}>
-          <strong>{main_text}</strong>
-
-          <small>{secondary_text}</small>
-        </li>
-      );
-    });
+## Rendering the Map
 
-  return (
-    <div>
-      <input value={value} onChange={handleInput} disabled={!ready} />
-
-      {status === 'OK' && <ul>{renderSuggestions()}</ul>}
-    </div>
-  );
-};
+At the component level, render Google Maps using `useMap` hook:
 
-export default Component;
-```
-
-## 📘 Types
+```tsx
+import { Box, Text } from '@ttoss/ui';
+import { useMap } from '@ttoss/google-maps';
 
-```ts
-import { ScriptStatus } from '@ttoss/hooks';
+const MyComponent = () => {
+  const { ref, map } = useMap();
 
-const useMap: (options: google.maps.MapOptions) => {
-  map: google.maps.Map | null;
-  ref: React.RefObject<HTMLDivElement>;
-  isMapInitialized: boolean;
-};
+  React.useEffect(() => {
+    // You have access to every map methods, like `setOptions`, through `map`.
+  }, [map]);
 
-const useGeocoder: () => {
-  geocoder: google.maps.Geocoder | null;
-  isGeocoderInitialized: boolean;
+  return (
+    <Box>
+      <Text>My Map</Text>
+      <Box ref={ref} sx={{ height, width }} />
+    </Box>
+  );
 };
-
-type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
-
-type Extends<T, U extends T> = U;
-
-type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
-
-type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
-
-export type GoogleMaps = typeof google.maps;
-
-const GoogleMapsProvider: React.FC<{
-  apiKey: string;
-  libraries?: Libraries[] | undefined;
-  language?: string;
-}>;
-
-const useGoogleMaps: () =>
-  | {
-      status: LoadedMapsStatus;
-      googleMaps: GoogleMaps;
-    }
-  | {
-      status: NotLoadedMapStatus;
-      googleMaps: null;
-    };
 ```
-
----
-
-## 💻 For more information
-
-- **[ Platform Google Maps Documentation](https://developers.google.com/maps/documentation/javascript/overview)**
-
-<br/>
-
-<h4 align="center">
-    Special thanks for the inspiring <a href="https://github.com/jmarceli/react-hook-google-maps">react-hook-google-maps</a> and <a href="https://github.com/wellyshen/use-places-autocomplete">use-places-autocomplete</a> documentation.
-</h4>

package/dist/esm/index.js

@@ -2,13 +2,18 @@
 import * as React from "react";
 
 // src/GoogleMapsProvider.tsx
-import { useScript } from "@ttoss/hooks";
 import * as React2 from "react";
+import { useScript } from "@ttoss/hooks";
 var GoogleMapsContext = React2.createContext({
   status: "idle",
   googleMaps: null
 });
-var GoogleMapsProvider = ({ children, apiKey, libraries, language }) => {
+var GoogleMapsProvider = ({
+  children,
+  apiKey,
+  libraries,
+  language
+}) => {
   const src = (() => {
     let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
     if (libraries) {
@@ -62,21 +67,28 @@ var useGeocoder = () => {
 
 // src/useMap.ts
 import * as React4 from "react";
-var useMap = (options) => {
-  const ref = React4.useRef(null);
+import { useCallbackRef } from "use-callback-ref";
+var useMap = (options = {}) => {
+  const [, forceUpdate] = React4.useState(0);
+  const ref = useCallbackRef(null, () => forceUpdate((n) => n + 1));
   const { googleMaps } = useGoogleMaps();
-  const [isMapInitialized, setIsMapInitialized] = React4.useState(false);
-  const optionsStringify = JSON.stringify(options);
   const map = React4.useMemo(() => {
     if (googleMaps && ref.current) {
-      const parsedOptions = JSON.parse(optionsStringify);
-      const googleMapsMap = new googleMaps.Map(ref.current, parsedOptions);
-      setIsMapInitialized(true);
-      return googleMapsMap;
+      return new googleMaps.Map(ref.current, options);
     }
     return null;
-  }, [googleMaps, optionsStringify]);
-  return { map, ref, isMapInitialized };
+  }, [googleMaps, ref.current]);
+  const optionsStringify = JSON.stringify(options);
+  React4.useEffect(() => {
+    if (map) {
+      const parsedOptions = JSON.parse(optionsStringify);
+      map.setOptions(parsedOptions);
+    }
+  }, [optionsStringify, map]);
+  return {
+    map,
+    ref
+  };
 };
 export {
   GoogleMapsProvider,

package/dist/index.d.ts

@@ -1,19 +1,20 @@
-import { ScriptStatus } from '@ttoss/hooks';
 import * as React from 'react';
+import { ScriptStatus } from '@ttoss/hooks';
 
 declare type Extends<T, U extends T> = U;
 declare type GoogleMaps = typeof google.maps;
 declare type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
 declare type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
 declare type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
-declare const GoogleMapsProvider: React.FC<{
+declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
+    children: React.ReactNode;
     apiKey: string;
-    libraries?: Libraries[];
+    libraries?: Libraries[] | undefined;
     /**
      * https://developers.google.com/maps/faq#languagesupport
      */
-    language?: string;
-}>;
+    language?: string | undefined;
+}) => JSX.Element;
 /**
  *
  * @returns param.googleMaps: GoogleMaps - returns the google maps object which
@@ -32,10 +33,15 @@ declare const useGeocoder: () => {
     isGeocoderInitialized: boolean;
 };
 
-declare const useMap: (options: google.maps.MapOptions) => {
+declare const useMap: (options?: google.maps.MapOptions) => {
+    /**
+     * asss
+     */
     map: google.maps.Map | null;
-    ref: React.RefObject<HTMLDivElement>;
-    isMapInitialized: boolean;
+    /**
+     * hhhh
+     */
+    ref: React.MutableRefObject<HTMLDivElement | null>;
 };
 
 export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap };

package/dist/index.js

@@ -33,13 +33,18 @@ module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 
 // src/GoogleMapsProvider.tsx
-var import_hooks = require("@ttoss/hooks");
 var React2 = __toESM(require("react"));
+var import_hooks = require("@ttoss/hooks");
 var GoogleMapsContext = React2.createContext({
   status: "idle",
   googleMaps: null
 });
-var GoogleMapsProvider = ({ children, apiKey, libraries, language }) => {
+var GoogleMapsProvider = ({
+  children,
+  apiKey,
+  libraries,
+  language
+}) => {
   const src = (() => {
     let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
     if (libraries) {
@@ -93,21 +98,28 @@ var useGeocoder = () => {
 
 // src/useMap.ts
 var React4 = __toESM(require("react"));
-var useMap = (options) => {
-  const ref = React4.useRef(null);
+var import_use_callback_ref = require("use-callback-ref");
+var useMap = (options = {}) => {
+  const [, forceUpdate] = React4.useState(0);
+  const ref = (0, import_use_callback_ref.useCallbackRef)(null, () => forceUpdate((n) => n + 1));
   const { googleMaps } = useGoogleMaps();
-  const [isMapInitialized, setIsMapInitialized] = React4.useState(false);
-  const optionsStringify = JSON.stringify(options);
   const map = React4.useMemo(() => {
     if (googleMaps && ref.current) {
-      const parsedOptions = JSON.parse(optionsStringify);
-      const googleMapsMap = new googleMaps.Map(ref.current, parsedOptions);
-      setIsMapInitialized(true);
-      return googleMapsMap;
+      return new googleMaps.Map(ref.current, options);
     }
     return null;
-  }, [googleMaps, optionsStringify]);
-  return { map, ref, isMapInitialized };
+  }, [googleMaps, ref.current]);
+  const optionsStringify = JSON.stringify(options);
+  React4.useEffect(() => {
+    if (map) {
+      const parsedOptions = JSON.parse(optionsStringify);
+      map.setOptions(parsedOptions);
+    }
+  }, [optionsStringify, map]);
+  return {
+    map,
+    ref
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "author": "ttoss",
   "contributors": [
     {
@@ -31,12 +31,13 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ttoss/hooks": "^1.14.2",
-    "@types/google.maps": "^3.47.3"
+    "@ttoss/hooks": "^1.14.3",
+    "@types/google.maps": "^3.48.6",
+    "use-callback-ref": "^1.3.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "4732a3ea8d21ab645bffc17338e87d60c285851f"
+  "gitHead": "0930d6b8f8d7bce388ea223298fa2b71c5717058"
 }

package/src/GoogleMapsProvider.tsx

@@ -1,5 +1,5 @@
-import { useScript, ScriptStatus } from '@ttoss/hooks';
 import * as React from 'react';
+import { ScriptStatus, useScript } from '@ttoss/hooks';
 
 type Extends<T, U extends T> = U;
 
@@ -25,14 +25,20 @@ const GoogleMapsContext = React.createContext<
 
 type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
 
-export const GoogleMapsProvider: React.FC<{
+export const GoogleMapsProvider = ({
+  children,
+  apiKey,
+  libraries,
+  language,
+}: {
+  children: React.ReactNode;
   apiKey: string;
   libraries?: Libraries[];
   /**
    * https://developers.google.com/maps/faq#languagesupport
    */
   language?: string;
-}> = ({ children, apiKey, libraries, language }) => {
+}) => {
   const src = (() => {
     let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
 

package/src/useMap.ts

@@ -1,12 +1,28 @@
 import * as React from 'react';
-
+import { useCallbackRef } from 'use-callback-ref';
 import { useGoogleMaps } from './GoogleMapsProvider';
 
-export const useMap = (options: google.maps.MapOptions) => {
-  const ref = React.useRef<HTMLDivElement>(null);
+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, () =>
+    forceUpdate((n) => n + 1)
+  );
+
   const { googleMaps } = useGoogleMaps();
 
-  const [isMapInitialized, setIsMapInitialized] = React.useState(false);
+  const map = React.useMemo(() => {
+    if (googleMaps && ref.current) {
+      return new googleMaps.Map(ref.current, options);
+    }
+
+    return null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [googleMaps, ref.current]);
 
   /**
    * To avoid re-initializing the map because shallow object comparison.
@@ -14,16 +30,24 @@ export const useMap = (options: google.maps.MapOptions) => {
    */
   const optionsStringify = JSON.stringify(options);
 
-  const map = React.useMemo(() => {
-    if (googleMaps && ref.current) {
+  /**
+   * Update options but not reinitialize the map.
+   */
+  React.useEffect(() => {
+    if (map) {
       const parsedOptions = JSON.parse(optionsStringify);
-      const googleMapsMap = new googleMaps.Map(ref.current, parsedOptions);
-      setIsMapInitialized(true);
-      return googleMapsMap;
+      map.setOptions(parsedOptions);
     }
+  }, [optionsStringify, map]);
 
-    return null;
-  }, [googleMaps, optionsStringify]);
-
-  return { map, ref, isMapInitialized };
+  return {
+    /**
+     * asss
+     */
+    map,
+    /**
+     * hhhh
+     */
+    ref,
+  };
 };