@noisemakerjon/react-address-autocomplete

A React component for Google Places address autocomplete.

Installation

npm install @noisemakerjon/react-address-autocomplete

Usage

import { AddressAutocompleteInput } from "@noisemakerjon/react-address-autocomplete";

function MyForm() {
  const [address, setAddress] = useState("");

  return (
    <AddressAutocompleteInput
      value={address}
      onChange={setAddress}
      apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
      placeholder="Start typing your address..."
    />
  );
}

Hook Usage

You can also use the hook directly for custom implementations:

import { useGooglePlacesAutocomplete } from "@noisemakerjon/react-address-autocomplete/hooks";

function MyComponent() {
  const { predictions, isLoading, error, fetchPredictions } = useGooglePlacesAutocomplete({
    apiKey: "your-api-key",
  });

  // Custom implementation...
}

API

AddressAutocompleteInput Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | value | string | Yes | Current input value | | onChange | (value: string) => void | Yes | Called when value changes | | apiKey | string | Yes | Google Maps API key | | onFocus | (e) => void | No | Focus event handler | | onBlur | (e) => void | No | Blur event handler | | onSelectionComplete | () => void | No | Called when user selects an address | | className | string | No | Additional CSS classes | | required | boolean | No | HTML required attribute |

useGooglePlacesAutocomplete Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | boolean | true | Enable/disable the hook | | apiKey | string | - | Google Maps API key |

Return Values

| Value | Type | Description | |-------|------|-------------| | predictions | PlacePrediction[] | Array of address predictions | | isLoading | boolean | Whether API request is in progress | | error | string | null | Error message if request failed | | fetchPredictions | (input: string) => void | Function to fetch predictions | | resetSession | () => void | Reset the Google session token | | clearPredictions | () => void | Clear current predictions |