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 - for a free key contact us.


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.

    $ 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 (   
     <
Autoaddress
         licencekey "your_key"
         vanityMode {true}
         addressProfile "Demo5LineV2"
         country "ie"
         language "en"
     />
);

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

Demo5LineV1

Demo5LineV2

Demo5LineV3


You are ready !

The Autoaddress Component is now ready for searching on your webpage

 

Now its time to :

  • See how you can Configure the component.
  • Set up custom Events for your needs.
  • Change the Styling for the ​component.