(bugfix) improved App example and readme file

.babelrc

@@ -0,0 +1,12 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		[
+			"@babel/preset-react",
+			{
+				"runtime": "automatic",
+				"throwIfNamespace": false // defaults to true
+			}
+		]
+	]
+}

.eslintrc.json

@@ -5,19 +5,23 @@
 		"plugin:prettier/recommended",
 		"plugin:react/recommended",
 		"plugin:import/recommended",
-		"prettier"
+		"prettier",
+		"react-hooks"
 	],
+	"plugins": ["react", "react-hooks", "prettier"],
 	"rules": {
 		"import/no-unresolved": 0,
 		"import/first": "error",
 		"import/newline-after-import": "error",
 		"import/no-duplicates": "error",
-		"react/react-in-jsx-scope": "off"
+		"react/react-in-jsx-scope": "off",
+		"react-hooks/exhaustive-deps": "warn"
 	},
 	"env": {
 		"es6": true,
 		"node": true
 	},
+	"parser": "@babel/eslint-parser",
 	"settings": {
 		"react": {
 			"version": "detect"

README.md

@@ -22,35 +22,40 @@ npm install --save google-maps-react-markers
 ## Usage
 
 ```jsx
-import GoogleMap from "google-maps-react-markers";
-
-const Marker = () => <div>I am a Marker.</div>
-
-const coordinates = [
-    {
-        lat: 45.4046987,
-        lng: 12.2472504,
-        name: "Venice",
-    },
-    {
-        lat: 41.9102415,
-        lng: 12.3959151,
-        name: "Rome",
-    },
-    {
-        lat: 45.4628328,
-        lng: 9.1076927,
-        name: "Milan",
-    },
-];
-
-const Map = () => {
+const App = () => {
+    const mapRef = useRef(null);
+    const [mapReady, setMapReady] = useState(false);
+
+    /**
+     * @description This function is called when the map is ready
+     * @param {Object} map - reference to the map instance
+     * @param {Object} maps - reference to the maps library 
+     */
+    const onGoogleApiLoaded = ({ map, maps }) => {
+        mapRef.current = map;
+        setMapReady(true);
+    };
+
+    const onMarkerClick = (markerId) => {
+        console.log("This is ->", markerId);
+    };
+
     return (
-        <GoogleMap defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }} defaultZoom={5} options={mapOptions}>
-            {coordinates.map(({ lat, lng, name }, index) => (
-                <Marker key={index} lat={lat} lng={lng} markerId={name} />
-            ))}
-        </GoogleMap>
+        <>
+            <GoogleMap
+                defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }}
+                defaultZoom={5}
+                options={mapOptions}
+                mapMinHeight="100vh"
+                onGoogleApiLoaded={onGoogleApiLoaded}
+                onChange={(map) => console.log("Map moved", map)}
+            >
+                {coordinates.map(({ lat, lng, name }, index) => (
+                    <Marker key={index} lat={lat} lng={lng} markerId={name} onClick={onMarkerClick} />
+                ))}
+            </GoogleMap>
+            {mapReady && alert("Map is ready")}
+        </>
     );
 };
 
@@ -59,21 +64,34 @@ export default Map;
 
 ## Props
 
-| Prop                       | Type     | Default                     | Description                               |
-| -------------------------- | -------- | --------------------------- | ----------------------------------------- |
-| apiKey - _required_        | string   | `''`                        | Api Key to load Google Maps               |
-| defaultCenter - _required_ | object   | `{ lat: 0, lng: 0 }`        | Default center of the map                 |
-| defaultZoom - _required_   | number   | `1-20`                      | Default zoom of the map                   |
-| libraries                  | array    | `['places', 'geometry']`    | Libraries to load                         |
-| options                    | object   | `{}`                        | Options for the map                       |
-| onGoogleApiLoaded          | function | `() => {}`                  | Callback when the map is loaded           |
-| onChange                   | function | `() => {}`                  | Callback when the map has changed         |
-| children                   | node     | `null`                      | Markers of the map                        |
-| loadingContent             | node     | `'Google Maps is loading'`  | Content to show while the map is loading  |
-| idleContent                | node     | `'Google Maps is on idle'`  | Content to show when the map is idle      |
-| errorContent               | node     | `'Google Maps is on error'` | Content to show when the map has an error |
-| mapMinHeight               | string   | `'unset'`                   | Min height of the map                     |
-| containerProps             | object   | `{}`                        | Props for the div container of the map    |
+| Prop              | Type     | Required | Default                     | Description                               |
+| ----------------- | -------- | -------- | --------------------------- | ----------------------------------------- |
+| apiKey            | string   | **yes**  | `''`                        | Api Key to load Google Maps               |
+| defaultCenter     | object   | **yes**  | `{ lat: 0, lng: 0 }`        | Default center of the map                 |
+| defaultZoom       | number   | **yes**  | `1-20`                      | Default zoom of the map                   |
+| libraries         | array    | no       | `['places', 'geometry']`    | Libraries to load                         |
+| options           | object   | no       | `{}`                        | Options for the map                       |
+| onGoogleApiLoaded | function | no       | `() => {}`                  | Callback when the map is loaded           |
+| onChange          | function | no       | `() => {}`                  | Callback when the map has changed         |
+| children          | node     | no       | `null`                      | Markers of the map                        |
+| loadingContent    | node     | no       | `'Google Maps is loading'`  | Content to show while the map is loading  |
+| idleContent       | node     | no       | `'Google Maps is on idle'`  | Content to show when the map is idle      |
+| errorContent      | node     | no       | `'Google Maps is on error'` | Content to show when the map has an error |
+| mapMinHeight      | string   | no       | `'unset'`                   | Min height of the map                     |
+| containerProps    | object   | no       | `{}`                        | Props for the div container of the map    |
+
+## Clustering
+
+For clustering, follow this [guide](https://www.leighhalliday.com/google-maps-clustering) using [useSupercluster Hook](https://github.com/leighhalliday/use-supercluster), but use bounds in this way:
+
+```jsx
+const onMapChange = ({ bounds, zoom }) => {
+    const ne = bounds.getNorthEast();
+    const sw = bounds.getSouthWest();
+    // useSupercluster accepts bounds in the form of [westLng, southLat, eastLng, northLat]
+    setMapBounds({ ...mapBounds, bounds: [sw.lng(), sw.lat(), ne.lng(), ne.lat()], zoom });
+};
+```
 
 ## License