ON-40754 # Added useGoogleJsApiLoader() hook

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
 

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 ?? '')
 }

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,
+ })
+}

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'