(feature) issue #7 - add typescript types + improved example with bou…

…nds and useSupercluster

.eslintrc.json

@@ -17,7 +17,6 @@
 		"react/react-in-jsx-scope": "off",
 		"react-hooks/rules-of-hooks": "error",
 		"react-hooks/exhaustive-deps": "warn",
-		"react/no-unknown-property": ["warn", { "ignore": ["jsx"] }],
 		"react/prop-types": "warn"
 	},
 	"env": {

README.md

@@ -28,40 +28,40 @@ npm install --save google-maps-react-markers
 
 ```jsx
 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 (
-        <>
-            {mapReady && <div>Map is ready. See for logs in developer console.</div>}
-            <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>
-        </>
-    );
+	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 (
+		<>
+			{mapReady && <div>Map is ready. See for logs in developer console.</div>}
+			<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>
+		</>
+	);
 };
 
 export default App;
@@ -93,8 +93,17 @@ For clustering, follow this [guide](https://www.leighhalliday.com/google-maps-cl
 const onMapChange = ({ bounds, zoom }) => {
     const ne = bounds.getNorthEast();
     const sw = bounds.getSouthWest();
-    // useSupercluster accepts bounds in the form of [westLng, southLat, eastLng, northLat]
+    /**
+    * useSupercluster accepts bounds in the form of [westLng, southLat, eastLng, northLat]
+    * const { clusters, supercluster } = useSupercluster({
+    *	points: points,
+    *	bounds: mapBounds.bounds,
+    *	zoom: mapBounds.zoom,
+    * })
+    */
     setMapBounds({ ...mapBounds, bounds: [sw.lng(), sw.lat(), ne.lng(), ne.lat()], zoom });
+
+    console.log("New bounds and zoom -> ", { bounds, zoom });
 };
 ```
 

dist/google-map.d.ts

@@ -0,0 +1,3 @@
+export default GoogleMap;
+declare const GoogleMap: any;
+//# sourceMappingURL=google-map.d.ts.map

dist/hooks/useGoogleMaps.d.ts

@@ -0,0 +1,5 @@
+export function useGoogleMaps({ apiKey, libraries }: {
+    apiKey: any;
+    libraries?: any[];
+}): "idle" | "loading" | "ready" | "error";
+//# sourceMappingURL=useGoogleMaps.d.ts.map

dist/hooks/useMemoCompare.d.ts

@@ -0,0 +1,10 @@
+export default useMemoCompare;
+/**
+ * A hook that compares the previous and current values of a reference.
+ * @param {any} value - the current value of the reference
+ * @param {function} compare - a function that compares the previous and current values
+ * @returns {any} the previous value of the reference
+ * @ref https://usehooks.com/useMemoCompare/
+ */
+declare function useMemoCompare(next: any, compare: Function): any;
+//# sourceMappingURL=useMemoCompare.d.ts.map

dist/hooks/useScript.d.ts

@@ -0,0 +1,10 @@
+export function useScript(script?: {
+    src: string;
+    attributes?: any;
+    callbacks?: {
+        onLoadCallback?: Function;
+        onErrorCallback?: Function;
+    };
+    elementIdToAppend?: string;
+}): "idle" | "loading" | "ready" | "error";
+//# sourceMappingURL=useScript.d.ts.map

dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./google-map";
+//# sourceMappingURL=index.d.ts.map