@comms-id/company-react

A React hook and a finished component for the Comms.ID Company field: the user types a company name, or a nine-digit ACN or ARBN. Accessible, no layout shift, with the data attribution always shown. React 18 or later; it depends on @comms-id/asic-company-lookup and nothing else.

import { createAsicCompanyLookupBrowserClient } from "@comms-id/asic-company-lookup/browser";
import { AsicCompanyLookupLookup } from "@comms-id/asic-company-lookup-react";

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

export const Form = () => (
  <AsicCompanyLookupLookup
    client={client}
    onSelect={(record, timing) => console.log(record, `${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.

What the field does

• A name: after the user pauses, it suggests companies (name, ACN or ARBN, status) from the ASIC register snapshot. The search already returns each whole record, so choosing one needs no second call.
• An ACN or ARBN: nine digits (spaces and hyphens allowed) are looked up at once. More than nine digits, or a wrong ASIC check digit, is refused in the browser and nothing is sent.
• The result is one summary line (name, the number named by its kind such as "ACN 001 234 564" or "ARBN 001 234 591", status) on a fixed note line, so the page never moves.
• "No company found." and "Company search is unavailable" are different messages; an outage offers "Try again". A snapshot miss does not prove a company is absent from the live register.

Your own markup: useAsicCompanyLookup

const field = useAsicCompanyLookup({ client, onSelect });
return (
  <>
    <input {...field.getInputProps()} />
    <ul {...field.getListboxProps("Matches")} hidden={!field.state.open}>
      {field.state.suggestions.map((s, i) => (
        <li key={s.key} {...field.getOptionProps(i)}>{s.primary}</li>
      ))}
    </ul>
    <p {...field.getStatusProps()}>{field.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: it is field.state.attribution.

The component

Props: client (required), label (default "Company name, ACN or ARBN"), onSelect, minChars (3), debounceMs (400), limit (8), settings, status (inside settings), 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-asic-company-lookup__* class names. It needs no stylesheet.

• The list floats under the input; opening it moves nothing. The note line has a reserved height.
• A failed lookup says why 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

Company data comes from ASIC's public registers, via data.gov.au (CC BY 3.0 AU). The component always shows the attribution. Do not hide it.

LICENSE is the consumer client licence. src/ is generated by @comms-id/forge-transformers and is never edited by hand.