Skip to main content

Examples

Automatic Google Maps Javascript API injection

<GooglePlacesAutocomplete apiKey="*****" />

Controlled input

You can store the selected value and the text used to search/show the selected option:

// this is the text shown in the search box (the search or the selected option)
const [value, setValue] = useState<string | null>(null);
// this is the currently selected option
const [selected, setSelected] = useState<PredictionOption | null>(null);

<GooglePlacesAutocomplete
inputValue={value}
setInputValue={setValue}
value={selected}
setValue={setSelected}
/>

Formik Usage

Formik's Field component is supported out of the box, including disabling when submitting and setting the field properly:

<Field
component={GooglePlacesAutocompleteField}
name="location"
label="Enter your location"
/>

The value of the field is the inputValue, so whatever is currently entered in the box. You can override any of the props for GooglePlacesAutocomplete by adding them to the Field's props.