React adresse autocomplete Danmark · useEffect + fetch

Integrer dansk adresse-autocomplete i React på 10 linjer: hent fra api.danadresse.dk i useEffect, vis dropdown med hits. Samme endpoints som DAWA — drop-in for eksisterende kode.

Status: Live — kræver API-nøgle (gratis, ingen kreditkort)

Hvad du får

useEffect + fetch

Ingen SDK nødvendig — ét fetch-kald i en useEffect og du har live typeahead.

Next.js Server Components

Kald API'et direkte fra en async Server Component — ingen klient-eksponering af API-nøglen.

TypeScript-definitioner

Fuld TypeScript-support via @danadresse/client — autocomplete i din editor.

Eksempel

// React hook-eksempel
const [hits, setHits] = useState([])
useEffect(() => {
  if (!q) return
  fetch(`https://api.danadresse.dk/autocomplete?q=${q}`, {
    headers: { 'X-Api-Key': process.env.REACT_APP_DANADRESSE_KEY }
  }).then(r => r.json()).then(setHits)
}, [q])

Sådan bliver det brugt

Checkout-formular

Erstat plain text-input med typeahead — valideret adresse fra første tastetryk.

Next.js App Router

Brug Route Handler til at proxye API-nøglen server-side og eksponere et sikkert autocomplete-endpoint til klient.

CRM lead-capture

Indbyg adresse-autocomplete i ethvert React-formularlibrary (react-hook-form, Formik, etc.).

Drop-in DAWA-kompatibel

Slug /react-adresse-autocomplete følger DAWA's konventioner — samme paths, samme JSON-shape, samme UUID'er. Se migration guide for det fulde overblik.

Se også

Gratis API (1 000 kald/md) WooCommerce autocomplete Shopify adresse-API Checkout autocomplete Ejendomsmægler-bundle

Klar til at integrere?

Gratis nøgle, ingen kreditkort, 1 000 kald/måned.

Start gratis →    Læs API-dokumentation →