Adressefelt med autocomplete i React

<script
  src="https://grundfast.dk/widget/v1/grundfast-adresse.js"
  defer
  data-key="gf_pub_live_..."
></script>

import { useEffect, useRef, type RefObject } from 'react';

export interface GrundfastAdresse {
  betegnelse: string;
  adresselinje: string;
  vejnavn: string | null;
  husnr: string | null;
  etage: string | null;
  doer: string | null;
  postnr: string | null;
  postnrnavn: string | null;
  kommunekode: string | null;
  adgangsadresse_id: string;
  adresse_id: string | null;
  bfe_nummer: number | null;
  koordinat: { lon: number; lat: number } | null;
}

interface Widget {
  attach(
    input: HTMLInputElement,
    opts: { key?: string; onSelect?: (a: GrundfastAdresse) => void },
  ): { destroy(): void } | undefined;
}

declare global {
  interface Window { GrundfastAdresse?: Widget }
}

const SRC = 'https://grundfast.dk/widget/v1/grundfast-adresse.js';
let loading: Promise<Widget> | null = null;

/** Indlæs scriptet én gang, også hvis det ikke står i index.html. */
function loadWidget(): Promise<Widget> {
  if (window.GrundfastAdresse) return Promise.resolve(window.GrundfastAdresse);
  loading ??= new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = SRC;
    s.onload = () => (window.GrundfastAdresse ? resolve(window.GrundfastAdresse) : reject());
    s.onerror = () => { loading = null; reject(new Error('adressefeltet kunne ikke indlæses')); };
    document.head.appendChild(s);
  });
  return loading;
}

export function useGrundfastAdresse(
  ref: RefObject<HTMLInputElement | null>,
  onSelect: (a: GrundfastAdresse) => void,
  key?: string,
) {
  // Den nyeste callback, uden at feltet skal hægtes af og på ved hver render.
  const latest = useRef(onSelect);
  latest.current = onSelect;

  useEffect(() => {
    let field: { destroy(): void } | undefined;
    let cancelled = false;
    loadWidget()
      .then((w) => {
        if (cancelled || !ref.current) return;
        const onSelect = (a: GrundfastAdresse) => latest.current(a);
        // Uden key bruges data-key fra script-tagget.
        field = w.attach(ref.current, key ? { key, onSelect } : { onSelect });
      })
      .catch(() => { /* feltet virker som et almindeligt input */ });
    return () => {
      cancelled = true;
      field?.destroy();
    };
  }, [ref, key]);
}

import { useRef, useState } from 'react';
import { useGrundfastAdresse } from './use-grundfast-adresse';

export function AdresseFelter() {
  const ref = useRef<HTMLInputElement>(null);
  const [adresse, setAdresse] = useState('');
  const [postnr, setPostnr] = useState('');
  const [by, setBy] = useState('');
  const [bfe, setBfe] = useState<number | null>(null);

  useGrundfastAdresse(ref, (a) => {
    setAdresse(a.adresselinje);
    setPostnr(a.postnr ?? '');
    setBy(a.postnrnavn ?? '');
    setBfe(a.bfe_nummer);
  });

  return (
    <fieldset>
      <label htmlFor="adresse">Adresse</label>
      <input id="adresse" ref={ref} value={adresse}
        onChange={(e) => setAdresse(e.target.value)} autoComplete="off" />
      <label htmlFor="postnr">Postnummer</label>
      <input id="postnr" value={postnr} onChange={(e) => setPostnr(e.target.value)} />
      <label htmlFor="by">By</label>
      <input id="by" value={by} onChange={(e) => setBy(e.target.value)} />
      <input type="hidden" name="bfe" value={bfe ?? ''} />
    </fieldset>
  );
}

curl -G "https://api.grundfast.dk/v1/adresse/search" \
  --data-urlencode "q=Vestergade 10" \
  --data-urlencode "token=$GRUNDFAST_PUBLIC_KEY" \
  -H "Origin: http://localhost:5173"