Fetchify Documentation

Using Address Auto-Complete in React

Use our JavaScript library to add Address Auto-Complete, email validation, and phone validation to your project. Find out below how to get it working in a React project.

Caution

Our JavaScript library can be used within React and other modern JavaScript frameworks, but it is not officially supported in these environments.

For the most reliable integration in modern projects, we recommend using our JSON API.

Step 1 - Loading our JavaScript Library

First, you'll have to load the Fetchify JavaScript library in your project. We recommend loading it in your project by adding the script tag seen in the code snippet below to your index.html file within the <head> tag. This will load the latest version of our JavaScript library from our CDN.

Alternatively, you can download the library and host it on your own server.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--  Load the Fetchify JavaScript library -->
    <script src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
    <title>React Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Step 2 - Instantiating the clickToAddress Class

Now that the JavaScript library has been loaded, we need to instantiate the clicktoAddress class. It's important to note that this class can only be instantiated once.

We can instantiate it anywhere in the project. In the code snippet below, it is instantiated within the entry file.

main.jsx

import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const shouldInstantiateClickToAddress = window.cc_global === undefined;

// Instantiate clickToAddress if it hasn't been instantiated
if (shouldInstantiateClickToAddress) {
  window.cc_global = new clickToAddress({
    accessToken: 'xxxxx-xxxxx-xxxxx-xxxxx',
    domMode: 'id'
  });
}

createRoot(document.getElementById('root')).render(
  <App />
);

Step 3 - Applying Address Auto-Complete

After successfully instantiating the clickToAddress class, you will be able to apply Address Auto-Complete, Email Validation, and Phone Validation anywhere within your React project.

In the code snippet below, we apply Address Auto-Complete to a form within our <Form> component by using the .attach() method provided by window.cc_global and specifying the id of each form element.

Form.jsx

import { useEffect } from 'react';

function Form() {
  useEffect(() => {
    const clickToAddress = window.cc_global;

    // Apply Address Auto-Complete
    clickToAddress.attach({
      search: 'search',
      line_1: 'line-1',
      company: 'company',
      town: 'town',
      postcode: 'postcode',
      country: 'country'
    });
  }, []);

  return (
    <form>
      Search For Address:
      <br/>
      <input type="text" id="search" />
      <br/>

      Address Line 1:
      <br/>
      <input type="text" id="line-1" />
      <br/>

      Company:
      <br/>
      <input type="text" id="company" />
      <br/>

      Town:
      <br/>
      <input type="text" id="town" />
      <br/>

      Postcode:
      <br/>
      <input type="text" id="postcode" />
      <br/>
      
      Country:
      <br/>
      <select id="country">
        <option value="gbr">United Kingdom</option>
        <option value="usa">United States</option>
      </select>
      <br/>
    </form>
  );
}

export default Form;

Step 4 - Applying Email & Phone Validation

Similar to how we applied Address Auto-Complete to our <Form> component in the previous step, we can apply Email and Phone Validation by using the addEmailVerify() and addPhoneVerify() methods.

Form.jsx

import { useEffect } from 'react';

function Form() {
  useEffect(() => {
    const clickToAddress = window.cc_global;

    // Apply Email Validation
    clickToAddress.addEmailVerify({
      email: '#email'
    });

    // Apply Phone Validation
    clickToAddress.addPhoneVerify({
      phone: '#phone',
      country: '#country'
    });
  }, []);

  return (
    <form>
      Email:
      <br/>
      <input type="text" id="email" />
      <br/>

      Phone:
      <br/>
      <input type="text" id="phone" />
      <br/>
      
      Country:
      <br/>
      <select id="country">
        <option value="gbr">United Kingdom</option>
        <option value="usa">United States</option>
      </select>
      <br/>
    </form>
  );
}

export default Form;

Done!

You should now have Address Auto-Complete, Email Validation, and Phone Validation working in your React project.