React Configurations

Configuration Options

When the Autoaddress React Component is initialised, you must pass in your license key. This is the only mandatory setting to pass into the control, for the rest of settings have default values set. 


Basic Initialisation

<Autoaddress
    licencekey = "your_key"
    vanityMode = {true}
    addressProfile = "Demo5LineV2"
/>

Binding Variables and States

You can bind variables and states to the settings so that they can respond to changes from your website.

this.state = { vanityModeState : true };

let countryVariable = 'ie'

return (     
     <Autoaddress
         licencekey = "your_key"
         vanityMode = { this.state.vanityModeState }
         country = { countryVariable }
         addressProfile = "Demo5LineV2"
     />
);

General Properties

Option Description Type Default
licencekey* Unique Key Per Customer string None
language Language for the component. Allowed values are  "en" for English and "ga" for Irish. string "en"
country Change the country search for the component. Allowed values are  "ie" for Ireland, "ni" for Northern Ireland and "gb" for Great Britain. string "ie"
autocomplete Toggle for enabling AutoComplete feature on the component boolean true
autocompleteMinChars Number of characters that are typed before AutoComplete feature starts. int 3
optionsLimit An upper limit on the number of options that may be returned. The default value is -1. Having the limit set to -1 allows for intelligent grouping when many address options are returned. int None
geographicAddress Turns on or off Geographic Address in results. boolean false
vanityMode Turns on or off Vanity mode, which displays non-Postal compliant user preferred addresses as part of the response data (See Find Address API for more details). boolean false
addressElements Turns on or off address elements (See Find Address API for more details). boolean false
addressProfile Name of address profile that determines how addresses are returned (See Find Address API for more details). string None
width Width of the Autoaddress component. By default this is set to "Auto" which means it will fit in whichever container it is placed in automatically and set it`s width to 100% of that container. If you wish to change the width of the component, simply add the width in px. I.e  "200" or "300" string "Auto"
displayBusinessListings Turn on or off the Business Listings tab for responses which return mixed residential and commercial results. When turned off only residential options will be returned. boolean "true"
defaultSearch  Turn on or off the default search behavior.  boolean   "false"

* Required Field


Message Properties

Below you will see how you can also configure all the messages displayed as part of the Autoaddress React Component. The following code snippet for example changes to text on the search button.

<Autoaddress
    licencekey = "your_key"
    vanityMode = {true}
    addressProfile = "Demo5LineV2"
    searchButtonLabel = "Search Button"
/>
Option Description Type Default
placeHolderLabel Hint to describe to expected input into the search field. Displayed before user starts typing. string "Enter Full Address or Postcode"
searchButtonLabel Value of the text on Search Button. string "Search"
optionsFoundLabel Text displayed to indicate to select one of the options returned. Only displayed when options are available. string "Please select an option below"
incompleteAddressLabel Info message displayed when the search result was an Incomplete Address. string "Too little information, please enter more details."
partialAddressLabel Info message displayed when the search result was an Partially Matched Address. string "Couldn't find [unmatched] try again or enter address manually below."
nuaAddressFoundLabel Info message displayed when the search result was an Non Unique Address (NUA). Other addresses share this address and require the user to add an Eircode to make the address unique. string "We’ve found the address, please add your Postcode in the text box below if you know it"
noResultFoundLabel Info Message displayed when no result could be found for the search. string "No search results have been found."
addressFoundLabel Success message when a full address or Eircode has been found. string "Postcode Found, address populated below"
inputRequiredLabel Info message displayed when no input has been entered by the user. string "Enter a full address or Postcode to begin your search."
errorMessageLabel Info message displayed when an Error has occurred. string "Sorry, an unexpected error has occurred."
addressTabLabel Tab Label string "Address"
businessTabLabel Tab Label string "Business"