arkyn
ChangelogGuides
arkyn
docs / providers / places-provider

PlacesProvider

PlacesProvider loads the Google Maps JavaScript API (with the places, marker, and maps libraries) and exposes whether it has finished loading via a render-prop. It's the required wrapper for SearchPlaces to work.

tsx

import { PlacesProvider } from "@arkyn/components/placesProvider";
Learn how subpath and root imports differ in How do I use imports.
Peer dependency required
Install @react-google-maps/api (a required peer dependency) for this provider to work: bun add @react-google-maps/api. You'll also need a Google Maps API key with the Places library enabled.

Basic Usage

The children prop is a render function that receives isLoaded, so you can defer rendering map-dependent UI until the script is ready.

tsx

<PlacesProvider apiKey={env.GOOGLE_MAPS_API_KEY}>
  {(isLoaded) => (isLoaded ? <SearchPlaces /* ... */ /> : <Skeleton />)}
</PlacesProvider>

Properties

apiKey - string Google Maps API key. Required.
children - (isLoaded: boolean) => ReactNode Render function called with whether the Google Maps script has finished loading. Required.
preventFontsLoading - boolean (default: true) Prevents the Maps SDK from automatically injecting its own Google Fonts stylesheet.
Related in Providers
On this page