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'