Error in console: utc_offset is deprecated as of November 2019. Use utc_offset_minutes instead. See https://goo.gle/js-open-now

[gfox-dev]

[gfox-dev]

import usePlacesService from 'react-google-autocomplete/lib/usePlacesAutocompleteService';
import React, { ChangeEventHandler, useEffect } from 'react';
import TextField from 'components/Fields/TextField';
import useKYC from 'context/KYC';
import { PlaceDetails } from 'types';

const AutoCompletePlaces = () => {
  const { setPlaceDetails } = useKYC();
  const { placesService, placePredictions, getPlacePredictions } =
    usePlacesService({
      apiKey: process.env.NEXT_PUBLIC_GEO_API_KEY,
      debounce: 100,
      options: {
        types: ['address'],
        componentRestrictions: { country: 'us' },
      },
    });

  useEffect(() => {
    if (!placePredictions?.length || !placesService) return;
    placesService.getDetails(
      { placeId: placePredictions[0].place_id },
      (placeDetails: PlaceDetails) => setPlaceDetails(placeDetails)
    );
  }, [placePredictions]);

  const handleChangeSearchField: ChangeEventHandler<HTMLInputElement> = (
    event
  ) => {
    getPlacePredictions({
      input: event.target.value,
    });
  };

  return (
    <TextField
      placeholder="Enter home address"
      onChange={handleChangeSearchField}
    />
  );
};

export default AutoCompletePlaces;

[gfox-dev]

Triggers when value is changed.