docs: add hooks & etc content

Author: pyjun01

docs/astro.config.mjs

@@ -89,15 +89,15 @@ export default defineConfig({
               label: 'Hooks',
               items: [
                 {
-                  label: 'useMapContext 🛠',
+                  label: 'useMapContext',
                   link: '/docs/api/use-map-context',
                 },
                 {
-                  label: 'useImportLibrary 🛠',
+                  label: 'useImportLibrary',
                   link: '/docs/api/use-import-library',
                 },
                 {
-                  label: 'useApiLoadingStatus 🛠',
+                  label: 'useApiLoadingStatus',
                   link: '/docs/api/use-api-loading-status',
                 },
               ],
@@ -106,11 +106,11 @@ export default defineConfig({
               label: 'etc',
               items: [
                 {
-                  label: 'LoadingStatus 🛠',
+                  label: 'LoadingStatus',
                   link: '/docs/api/loading-status',
                 },
                 {
-                  label: 'appendLibImportScript 🛠',
+                  label: 'appendLibImportScript',
                   link: '/docs/api/append-lib-import-script',
                 },
               ],

docs/src/components/api/useMapContext/index.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { GoogleMap, Marker, useMapContext } from "react-google-map-wrapper";
+
+import { Container } from "../../Container";
+
+function MapContent() {
+  const map = useMapContext();
+
+  console.log(map);
+
+  useEffect(() => {
+    setTimeout(() => {
+      map.fitBounds({
+        south: 37.5211158,
+        north: 37.5011158,
+        west: 127.098167,
+        east: 127.098167,
+      })
+    }, 3000);
+  }, []);
+
+  return (
+    <Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
+  )
+}
+
+export function UseMapContextEx() {
+  return (
+    <Container>
+      <GoogleMap
+        className='h-[400px]'
+        zoom={16}
+        center={{ lat: 37.5111158, lng: 127.098167 }}
+      >
+        <MapContent />
+      </GoogleMap>
+    </Container>
+  )
+}

docs/src/content/docs/docs/api/append-lib-import-script.mdx

@@ -3,4 +3,6 @@ title: appendLibImportScript
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+`appendLibImportScript` function add the inline bootstrap loader script to the header that Load the Maps JavaScript API.
+
+<a href='./google-map-api-loader'>GoogleMapApiLoader</a> call this function, so you don't need to call it yourself. but if you want to preload Google Maps script, you can call it manually in the root file.

docs/src/content/docs/docs/api/loading-status.mdx

@@ -3,4 +3,12 @@ title: LoadingStatus
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+`LoadingStatus` is enum for google map loading status.
+
+```tsx
+export enum LoadingStatus {
+  LOADING = 'LOADING', // loading
+  FAILURE = 'FAILURE', // loading failed
+  SUCCESS = 'SUCCESS', // loading finished
+}
+```

docs/src/content/docs/docs/api/use-api-loading-status.mdx

@@ -3,4 +3,27 @@ title: useApiLoadingStatus
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+`useApiLoadingStatus` hooks is used for get current <a href='./loading-status'>LoadingStatus</a>.
+
+In most cases, you won't need to use it.
+
+### Basic Example
+
+```tsx
+function App() {
+  const loadingStatus = useApiLoadingStatus();
+
+  return (
+    <GoogleMapApiLoader
+      apiKey='YOUR_API_KEY'
+    >
+      {
+        loadingStatus === LoadingStatus.SUCCESS && (
+          // now you can use Google Map API.
+          <MyMap />
+        )
+      }
+    </GoogleMapApiLoader>
+  );
+}
+```

docs/src/content/docs/docs/api/use-import-library.mdx

@@ -3,4 +3,11 @@ title: useImportLibrary
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+`useImportLibrary` hooks is a wrapper of <a href='https://developers.google.com/maps/documentation/javascript/reference/top-level#google.maps.importLibrary' target='_blank' rel='noreferrer'>importLibrary</a>
+
+### function type
+
+```ts
+<Name extends LibraryName, Lib = LibraryMap[Name]>(libName: Name) => Lib | null;
+```
+

docs/src/content/docs/docs/api/use-map-context.mdx

@@ -3,4 +3,48 @@ title: useMapContext
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+import { UseMapContextEx } from '../../../../components/api/useMapContext';
+
+`useMapContext` hooks read <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map' target='_blank' rel='noreferrer'>Map</a> instance of the <a href='./google-map'>GoogleMap</a> component.
+
+### Basic Example
+
+```tsx
+function MapContent() {
+  const map = useMapContext();
+
+  console.log(map);
+
+  useEffect(() => {
+    setTimeout(() => { // refresh and watch the example below!
+      map.fitBounds({
+        south: 37.5211158,
+        north: 37.5011158,
+        west: 127.098167,
+        east: 127.098167,
+      })
+    }, 3000);
+  }, []);
+
+  return (
+    <Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
+  );
+}
+
+function MyMap() {
+  return (
+    <GoogleMap
+      className='h-[400px]'
+      center={{ lat: 37.5111158, lng: 127.098167 }}
+    >
+      <MapContent />
+    </GoogleMap>
+  );
+}
+```
+
+<UseMapContextEx client:only='react' />
+
+### Alternative
+
+You can use <a href='./google-map'>GoogleMap</a> event callbacks(`onLoad`, etc.) or `ref` props to get a <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map' target='_blank' rel='noreferrer'>Map</a> instance.