@tdcerhverv/addresslookup

AddressLookup component

An address lookup input component that uses line-visitation microservice

Usage

Import like this:

import { AddressLookup } from '@tdcerhverv/addresslookup';

Use like this:

<AddressLookup {...props}></AddressLookup>

Props

interface IAddressFieldProps {
  id?: string;
  labels?: IAddressLookupLables;
  onTextInputChange?: (value: string) => void;
  onOptionChosen?: (address: IDawaAddress) => void;
  urlBuilder?: (value: string, urlObject: URL) => string;
  onError?: (error: any) => void;
  hasError: boolean;
  onClear?: () => void;
}

• urlBuilder: supply a function that returns the url to fetch. This can be used to call other compatible search endpoints, e.g. could be a proxy path to the address service. The function will be called with the current search value and the default url parsed as an URL object. It is recommended to use encodeURI on the search value to ensure nordic letters gets the right encoding.
• onError: supply a function that will be called if there's an error when calling the search endpoint.

Types

interface IAddressLookupLables {
  label: string;
  noResult: string;
  errorLabel: string;
  placeholder: string;
}

interface IDawaAddress {
  addressAccessId: null | string;
  amsId: null | string;
  apartmentNumber: null | string;
  caretpos: number;
  city: string;
  country: null | string;
  floor: null | string;
  floorSide: null | string;
  forslagstekst: string;
  houseLetter: null | string;
  houseNumber: null | string;
  kvhx: null | string;
  latitude: null | string;
  longStreet: null | string;
  longitude: null | string;
  madId: null | string;
  municipalityCode: null | string;
  placeName: null | string;
  postalCode: string;
  street: string;
  streetCode: null | string;
  tekst: string;
}

You can import the IDawaAddress type like this:

import { IDawaAddress } from '@tdcerhverv/addresslookup';

Tags

input, autocomplete, address, lookup, search, dropdown