From 72a19da2f86f10673f4dc4232488a51782d071c5 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matt.carroll139@gmail.com>
Date: Tue, 28 May 2024 16:00:11 +1000
Subject: [PATCH] ON-40754 # Added useGoogleJsApiLoader() hook

---
 CHANGELOG.md                      |  1 +
 src/hooks/useGoogle.ts            | 15 ++-------------
 src/hooks/useGoogleJsApiLoader.ts | 20 ++++++++++++++++++++
 src/index.ts                      |  1 +
 4 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/useGoogleJsApiLoader.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44b73a0c..e8f43f5a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - `<FormElementGoogleAddress />`
+- `useGoogleJsApiLoader()` hook
 
 ### Changed
 
diff --git a/src/hooks/useGoogle.ts b/src/hooks/useGoogle.ts
index af215e5a..de84dd88 100644
--- a/src/hooks/useGoogle.ts
+++ b/src/hooks/useGoogle.ts
@@ -1,19 +1,8 @@
-import * as React from 'react'
-import { useJsApiLoader, Libraries } from '@react-google-maps/api'
 import useGoogleMapsApiKey from './useGoogleMapsApiKey'
+import useGoogleJsApiLoader from './useGoogleJsApiLoader'
 
 export default function useGoogle() {
   const key = useGoogleMapsApiKey()
 
-  const libraries = React.useMemo<Libraries>(
-    () => ['maps', 'marker', 'places'],
-    [],
-  )
-
-  const { isLoaded } = useJsApiLoader({
-    googleMapsApiKey: key ?? '',
-    libraries,
-  })
-
-  return { isLoaded }
+  return useGoogleJsApiLoader(key ?? '')
 }
diff --git a/src/hooks/useGoogleJsApiLoader.ts b/src/hooks/useGoogleJsApiLoader.ts
new file mode 100644
index 00000000..f4a3152e
--- /dev/null
+++ b/src/hooks/useGoogleJsApiLoader.ts
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { useJsApiLoader, Libraries } from '@react-google-maps/api'
+
+/**
+ * Load the google maps JavaScript API libraries used by this package.
+ *
+ * @param key Google Maps API Key
+ * @returns
+ */
+export default function useGoogleJsApiLoader(key: string) {
+  const libraries = React.useMemo<Libraries>(
+    () => ['maps', 'marker', 'places'],
+    [],
+  )
+
+  return useJsApiLoader({
+    googleMapsApiKey: key,
+    libraries,
+  })
+}
diff --git a/src/index.ts b/src/index.ts
index 42e054d7..7106c9ef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -45,6 +45,7 @@ export {
 export { default as useLoadResourcesState } from './hooks/useLoadResourcesState'
 export { default as useFormSubmissionState } from './hooks/useFormSubmissionState'
 export { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'
+export { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'
 
 export { default as ProgressBar } from './components/renderer/ProgressBar'
 export { default as PaymentReceipt } from './PaymentReceipt'