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
- ``
+- `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(
- () => ['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(
+ () => ['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'