@comms-id/australian-address-autocomplete-react

A React hook and a finished component for Comms.ID Address autocomplete. Accessible, no layout shift, with the data attribution always shown. React 18 or later; it depends on @comms-id/australian-address-autocomplete and nothing else.

import { createAustralianAddressAutocompleteBrowserClient } from "@comms-id/australian-address-autocomplete/browser";
import { AustralianAddressAutocomplete } from "@comms-id/australian-address-autocomplete-react";

const client = createAustralianAddressAutocompleteBrowserClient({ relayUrl: "/api/comms-id/address" });

export const Checkout = () => (
  <AustralianAddressAutocomplete
    client={client}
    label="Delivery address"
    onSelect={(address, timing) => console.log(address.displayAddress, `${timing.ms} ms`)}
  />
);

relayUrl is your own server route, set up with @comms-id/relay: your server signs the call as your registered app, so the browser holds no credential.

Your own markup: useAustralianAddressAutocomplete

const address = useAustralianAddressAutocomplete({ client, onSelect });
return (
  <>
    <input {...address.getInputProps()} />
    <ul {...address.getListboxProps("Matches")} hidden={!address.state.open}>
      {address.state.suggestions.map((s, i) => (
        <li key={s.id} {...address.getOptionProps(i)}>{s.label}</li>
      ))}
    </ul>
    <p {...address.getStatusProps()}>{address.state.announcement}</p>
  </>
);

The prop getters carry the WAI-ARIA combobox contract: roles, aria-expanded, aria-controls, aria-activedescendant, key handling (arrows, Enter, Escape, Tab) and a polite live region. Render the attribution yourself when you use the hook: import { ATTRIBUTION } from "@comms-id/australian-address-autocomplete-react".

The component

Props: client and label (required), onSelect, minChars (3), debounceMs (400), limit (8), within, idPrefix, name, placeholder, disabled, required, className, listLabel, showTiming (true), renderOption.

Style it with the custom properties --comms-id-text, --comms-id-surface, --comms-id-border, --comms-id-active, --comms-id-radius or the comms-id-australian-address-autocomplete__* class names. It needs no stylesheet.

• The list floats under the input; opening it moves nothing. The status line has a reserved height.
• A failed lookup says why (Address search is unavailable) and offers "Try again"; it is never shown as "no match".
• It renders on the server with the same structure, and works under StrictMode.

Data attribution

Address data is G-NAF. The component always shows the required wording. Do not hide it.

LICENSE is the consumer client licence.