How to integrate react-google-places-autocomplete with react-hook-from? - reactjs

Question

I wanted to have a input for location in my form like below
I am using a ready made component for this https://www.npmjs.com/package/react-google-places-autocomplete
import React from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
const GooglePlacesAutocompleteComponent = () => (
<div>
<GooglePlacesAutocomplete
apiKey="xxxxxxxxxxxxxxx"
/>
</div>
);
export default Component;
What I generally do the following with react hook form for with a material ui Textfield is:
const validationSchema = Yup.object().shape({
location: Yup.string().required("Location is required"),
});
const {
control,
handleSubmit,
formState: { errors },
reset,
setError,
} = useForm({
resolver: yupResolver(validationSchema),
});
and materialui textfield
<Controller
name="location"
control={control}
render={({ field: { ref, ...field } }) => (
<TextField
{...field}
inputRef={ref}
fullWidth
label="location"
margin="dense"
error={errors.location ? true : false}
/>
)}
/>
<Typography variant="inherit" color="textSecondary">
{errors.name?.message}
</Typography>
So Here instead of TextField I have to use GooglePlacesAutocompleteComponent
I want user to know its required.
I think something like below should be possible, but I am not getting what props to pass:
<Controller
name="location"
control={control}
render={({ field: { ref, ...field } }) => (
<GooglePlacesAutocompleteComponent
<--------------------------->
But for this component how can i pass the below things
{...field}
inputRef={ref}
fullWidth
label="location"
margin="dense"
error={errors.location ? true : false}
<--------------------------->
/>
)}
/>
<Typography variant="inherit" color="textSecondary">
{errors.name?.message}
</Typography>

Answer 1

GooglePlacesAutocomplete uses react-select internally. In RHF docs, it shows you how to integrate with the Select component from react-select:
<Controller
name="iceCreamType"
control={control}
render={({ field }) => <Select
{...field}
options={[
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
]}
/>}
/>
GooglePlacesAutocomplete exposes a SelectProps prop to let you override the Select props, so this is how you use it with RHF:
const GooglePlacesAutocompleteComponent = ({ error, ...field }) => {
return (
<div>
<GooglePlacesAutocomplete
apiKey="xxxxxxxxxxxxxxx"
selectProps={{ ...field, isClearable: true }}
/>
{error && <div style={{ color: "red" }}>{error.message}</div>}
</div>
);
};
And in your form:
<Controller
name="location"
rules={{
required: "This is a required field"
}}
control={control}
render={({ field, fieldState }) => (
<GooglePlacesAutocompleteComponent
{...field}
error={fieldState.error}
/>
)}
/>