@tdcerhverv/addresslookup
v1.7.1
Published
Address lookup input field
Downloads
5
Maintainers
Keywords
Readme
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 searchvalue
and the default url parsed as an URL object. It is recommended to useencodeURI
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