React address autocomplete Denmark · useEffect + fetch

Integrate Danish address autocomplete into React in 10 lines: fetch from api.danadresse.dk in useEffect, render a dropdown of hits. Same endpoints as DAWA — drop-in for existing code.

Status: Live — requires API key (free, no credit card)

What you get

useEffect + fetch

No SDK needed — one fetch call in a useEffect and you have live typeahead.

Next.js Server Components

Call the API directly from an async Server Component — no client-side API key exposure.

TypeScript definitions

Full TypeScript support via @danadresse/client — autocomplete in your editor.

Example

// React hook example
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])

How it's used

Checkout form

Replace a plain text input with typeahead — validated address from the first keystroke.

Next.js App Router

Use a Route Handler to proxy the API key server-side and expose a safe autocomplete endpoint to the client.

CRM lead capture

Embed address autocomplete in any React form library (react-hook-form, Formik, etc.).

Drop-in DAWA-compatible

The slug /react-adresse-autocomplete follows DAWA's conventions — same paths, same JSON shape, same UUIDs. See the migration guide for the full picture.

See also

Free API (1,000 calls/mo) WooCommerce autocomplete Shopify address API Checkout autocomplete Estate agent bundle

Ready to integrate?

Free key, no credit card, 1,000 calls/month.

Start free →    Read the API docs →