React Component

Setting up Autoaddress for your React projects

Autoaddress can be implemented in your React projects by using our Autoaddress React component. Starting with the basic requirements, you can follow the step-by-step instructions below.


Requirements

  • Node.js with Node Package Manager (npm).
  • A React app project with JSX support.
  • Autoaddress Licence Key.

Step 1 : Installing the package

The package can be installed by using the following command in the project root folder using a terminal or command-line interface.

<code>    $ npm install "@autoaddress.ie/autoaddress-react"
	

Step 2 : Importing the Autoaddress component

In your React project, you can import the Autoaddress component using the code below.

 import Autoaddress from '@autoaddress.ie/autoaddress-react';
	

Step 3 : Instantiating the component

After importing the component you can instantiate it by using the code below in the "return" part of your function.

  return (   <br>     <Autoaddress<br>         licencekey = "your_key"<br>         vanityMode = {true}<br>         addressProfile = "Demo5LineV2"<br>         country = "ie"<br>         language = "en"<br>     /><br>);
	

Step 4 : 

Ensure Vanity Mode is set to ‘true’ to ensure that your search returns and can display the preferred address (the most commonly used version of that address).  

The Autoaddress component is now and up and running on your page, you can now change the configuration, add extra logic in the callback events or change the styling to suit your needs !


Step 5 : 

Supply your address profile. The address profile will define how your address is presented based on your profile's rules.

Below are examples of the same address using different Address Profiles.

ap1v2
AutoaddressProfileV2
ap3v2