Merge branch 'develop' into feat/update-properties-readme

Author: BiniCodes

.gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
 .vscode
+.env
+.parcel-cache
+public

.pretiierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "parser": "typescript"
+}

CHANGELOG.md

@@ -1,4 +1,9 @@
-## [1.5.1](https://github.com/ubilabs/google-maps-react-hooks/compare/v1.4.7...v1.5.1) (2021-11-22)
+## [1.5.3](https://github.com/ubilabs/google-maps-react-hooks/compare/v1.4.7...v1.5.3) (2022-10-17)
+
+
+### Bug Fixes
+
+* **package:** adjust module ([#56](https://github.com/ubilabs/google-maps-react-hooks/issues/56)) ([106311e](https://github.com/ubilabs/google-maps-react-hooks/commit/106311e1d3160fc2639338a1191c9a78872d413c))
 
 
 

README.md

@@ -1,4 +1,5 @@
 # Google Maps React Hooks
+[![npm version](https://img.shields.io/npm/v/@ubilabs/google-maps-react-hooks)](https://www.npmjs.com/package/@ubilabs/google-maps-react-hooks) [![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/ubilabs/google-maps-react-hooks/blob/develop/LICENSE)
 
 ## Description
 
@@ -108,6 +109,7 @@ interface GoogleMapProviderProps {
   language?: string;
   region?: string;
   version?: string;
+  authReferrerPolicy?: string;
   onLoad?: (map: google.maps.Map) => void;
 }
 ```
@@ -255,6 +257,18 @@ See: [Versions](https://developers.google.com/maps/documentation/javascript/vers
 
 - - - -
 
+__authReferrerPolicy__ (_optional property_)
+
+Use this parameter to set auth_referrer_policy=origin when an URL on the same origin uses the API Key, to limit the amount of data sent when authorizing requests.
+
+```Typescript
+authReferrerPolicy?: string;
+```
+
+See: [auth_referrer_policy](https://developers.google.com/maps/documentation/javascript/url-params)
+
+- - - -
+
 __onLoad__ (_optional property_)
 
 A callback function that is called, when the map is loaded.
@@ -276,18 +290,6 @@ _Example:_
 
 - - - -
 
-__authReferrerPolicy__ (_optional property_)
-
-Use this parameter to set auth_referrer_policy=origin when an URL on the same origin uses the API Key, to limit the amount of data sent when authorizing requests.
-
-```Typescript
-authReferrerPolicy?: string;
-```
-
-See: [auth_referrer_policy](https://developers.google.com/maps/documentation/javascript/url-params)
-
-- - - -
-
 ## Hooks
 
 ### useGoogleMap

examples/.env.example

@@ -0,0 +1 @@
+GOOGLE_MAPS_API_KEY="..."

examples/basic-google-map/README.md

@@ -0,0 +1,26 @@
+# Basic Google Maps Setup Example
+
+This is an example setup to show a **basic Google Map** with the Google Maps React Hooks library.
+
+## Instructions
+
+To run this project, clone the Google Maps React Hooks repository locally.
+
+At the root of the repository, run:
+
+```shell
+npm run start:sample-map
+```
+
+**NOTE**:
+To see the examples it is needed to add an `.env` file with a [Google Maps API key](https://developers.google.com/maps/documentation/embed/get-api-key#:~:text=Go%20to%20the%20Google%20Maps%20Platform%20%3E%20Credentials%20page.&text=On%20the%20Credentials%20page%2C%20click,Click%20Close.) in the following format:
+
+`GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"`
+
+An example can be found in `.env.example`.
+
+## Output
+
+The project will start at [localhost:1234](http://localhost:1234) and show a basic Google Map.
+
+![image](https://user-images.githubusercontent.com/39244966/194873046-3e731074-c7f5-4ff7-8b7d-69f7895ce50a.png)

examples/basic-google-map/app.tsx

@@ -0,0 +1,45 @@
+import React, {FunctionComponent, useState, useCallback} from 'react';
+import {GoogleMapProvider} from '@ubilabs/google-maps-react-hooks';
+
+import MapCanvas from './components/map-canvas/map-canvas';
+
+import {GOOGLE_MAPS_API_KEY} from '../constants';
+
+import './main.module.css';
+
+const mapOptions = {
+  center: {lat: 53.5582447, lng: 9.647645},
+  zoom: 6,
+  disableDefaultUI: true,
+  zoomControl: true,
+  zoomControlOptions: {
+    position: 3 // Right top
+  }
+};
+
+const App: FunctionComponent<Record<string, unknown>> = () => {
+  const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
+
+  const mapRef = useCallback(
+    (node: React.SetStateAction<HTMLDivElement | null>) => {
+      node && setMapContainer(node);
+    },
+    []
+  );
+
+  return (
+    <React.StrictMode>
+      <GoogleMapProvider
+        googleMapsAPIKey={GOOGLE_MAPS_API_KEY}
+        mapContainer={mapContainer}
+        options={mapOptions}
+      >
+        <div id="container">
+          <MapCanvas ref={mapRef} />
+        </div>
+      </GoogleMapProvider>
+    </React.StrictMode>
+  );
+};
+
+export default App;

examples/basic-google-map/components/map-canvas/map-canvas.module.css

@@ -0,0 +1,4 @@
+.map {
+  width: 100%;
+  height: 100%;
+}

examples/basic-google-map/components/map-canvas/map-canvas.tsx

@@ -0,0 +1,9 @@
+import React, {forwardRef} from 'react';
+
+import styles from './map-canvas.module.css';
+
+const MapCanvas = forwardRef<HTMLDivElement, Record<string, unknown>>(
+  (_, ref) => <div ref={ref} className={styles.map} />
+);
+
+export default MapCanvas;

examples/basic-google-map/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="de-DE">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <title>Basic Google Maps setup with the Google Maps React Hooks.</title>
+    <meta
+      name="description"
+      content="Basic Google Maps setup with the Google Maps React Hooks."
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>