React Events

Binding the Autoaddress React Component Events

The Autoaddress component is event driven, and we have provided the opportunity for you to hook into these events and add your own logic with custom callback functions. These events range from when the component is initialised all the way to the end when your address has been found.

We also pass data back in key events so you can grab this data and perform custom actions to suit your own needs.

See below for details on when these events are triggered and how you can access them.


How to access a callback event

<Autoaddress
    licencekey = "your_key"
    vanitymode = {true}
    addressprofile = "Demo5LineV2"

    //Search Lifecycle Callback Events
    onInitialize = () => { }
    onAutoCompleteSelected = {(item) => { }}
    onSearchStart = () => { }
    onSearchCompleted = {(data) => { }}
    onAddressFound = {(data) => { }}

    //Error Callback
    onLookupError = () => {}

    //User Events Callback
    onChange = {(input) => { }}
    onClear = () => { }
    onFocus = () => { }
/>
	

Binding events to functions

You can also bind the callback functions to other functions containing your logic, like in the example below mapping the "onAddressFound" callback event to the "returnSearchResult" function.

let returnSearchResult = (data) => { //Your Logic Here };

return (     
    <div>      
         <Autoaddress          
             licencekey = 'your_key'            
            vanityMode = {true}            
            addressProfile = "Demo5LineV2"      
            
            onAddressFound = {returnSearchResult}
         />    
    </div>
);
	

Search Lifecycle Callbacks in order

Option Description Type Default
onInitialize() Invoked once the Autoaddress component is completely initialised. function() null
onAutoCompleteSelected(item) Invoked once an item has been selected from the autocomplete dropdown. function() null
onSearchStart() A request is about to be made to the FindAddress API. function() null
onSearchCompleted(data) Invoked when a response has been received from the FindAddress API search, the full response data is now available to you. Check the Find Address API page to examine the response format. This event is invoked after every search performed using the component. i.e. when the search button is hit or an item is selected from autocomplete. function() null
onAddressFound(data) Invoked when a response has been received from the FindAddress API search, the full response data is now available to you. Check the Find Address API page to examine the response format.

Similar to onSearchCompleted(data) but only fired when this is the final result for the search. This is the most important callback since this will only be called when the component has found a final result for the address or Eircode with no further options available.
function() null
Sample JSON(P) response for onSearchCompleted(data) & onAddressFound(data)Once a search has been completed using the Find Address API i.e. via the user hitting the search button or selecting an item from autocomplete the  onSearchCompleted(data) and  onAddressFound(data) callbacks are called. The  data parameter passed back to the callbacks contains the response from the API response. See below for an example of a JSON response.
{
  "result": {
    "code": 100,
    "text": "PostcodeAppended"
  },
  "postcode": "D08DW25",
  "addressId": 1700286134,
  "addressType": {
    "code": 2150,
    "text": "ResidentialAddressPoint"
  },
  "matchLevel": {
    "code": 2,
    "text": "AddressPoint"
  },
  "postalAddress": [
    "APARTMENT 49",
    "CAVALRY HOUSE",
    "CLANCY QUAY",
    "SOUTH CIRCULAR ROAD",
    "DUBLIN 8"
  ],
  "vanityAddress": [ 
    "Apartment 49", 
    "Cavalry House", 
    "Clancy Quay", 
    "South Circular Road", 
    "Dublin 8" 
  ], 
  "reformattedAddressResult": { 
    "code": 100, 
    "text": "Success" 
  },
  "reformattedAddress": [ 
    "Apartment 49, Cavalry House", 
    "Clancy Quay", 
    "South Circular Road", 
    null, 
    "Dublin 8" 
  ],
  "totalOptions": 0,
  "options": [],
  "input": {
    "key": "YOUR_KEY",
    "txn": "fc1f98cd-605a-494e-b87c-06a8bfe2a629",
    "address": "APARTMENT 49, CAVALRY HOUSE, CLANCY QUAY, SOUTH CIRCULAR ROAD, DUBLIN 8",
    "addressId": 1700286134,
    "language": "en",
    "country": "ie",
    "smartGroupingIndex": null,
    "isVanityMode": true,
    "addressProfileName": "Demo5LineV2"
  },
  "links": [
    {
      "rel": "self",
      "href": "http://api.autoaddress.ie/2.0/findaddress?key=YOUR_KEY&address=APARTMENT+49%2c+CAVALRY+HOUSE%2c+CLANCY+QUAY%2c+SOUTH+CIRCULAR+ROAD%2c+DUBLIN+8&addressId=1700286134&vanityMode=True&addressProfileName=Demo5LineV2"
    }
  ]
}
	

Error Callbacks

Option Description Type Default
onLookupError(data) Invoked when an error has occured during a search. function() null
Sample JSON(P) response for  onLookUpError(data)When an error occurs within the component, a message is returned detailing the source of the problem.
{
  "httpStatusCode": {
    "code": 401,
    "text": "Unauthorized"
  },
  "requestUrl": "https://api.autoaddress.ie/2.0/findaddress?key=YOUR_KEY&address=4%20INNS%20COURT%2C%20WINETAVERN%20STREET%2C%20DUBLIN%208&addressId=1004420615&limit=20&vanityMode=True&callback=foo",
  "errors": [
    {
      "type": {
        "code": 401005,
        "text": "AccessToRestrictedData"
      },
      "message": "Data unavailable.  Only sample addresses and dummy eircodes available.",
      "helpUrl": "http://www.autoaddress.ie"
    }
  ]
}
	

User Action Callbacks

Option Description Type Default
onChange(value) Invoked when the value of the input in the search field is changed. function() null
onClear() Invoked when the search field is cleared manually by the user. function() null
onFocus() Invoked when search fields gains Focus. function() null