Adding postcode lookup to an address form 🏡.

👋 Hey readers! Have you been given the task of improving an address form and thought, "hey, I could add postcode lookup to this form!" 💡.

Well, you've found the right blog post, because as the Einstein's amongst us have already guessed, this blog post is going to show you how!

First though, why is adding postcode lookup useful? Well, address entry is hard. It's slow on desktop and horrendous on mobile, having customers type "Flat 346B East Providence Tower" is a time consuming and error prone task. Customer addresses can have spelling mistakes or could just be incorrect, which at its worst could affect the success of taking payments or delivering their purchase! 😨

But integrating postcode lookup can be costly, right? No, not anymore. Head over to Firstclasspostcodes and register to get an API key. You get 500 requests for free, which is more than enough for any small e-commerce store. Firstclasspostcodes also provides a composable React library that makes it easy to integrate postcode lookup into any existing address form.

So let's get started, we've got our example address form already coded inside our application:

export const AddressForm = () => {
  return (
    <form>
      <fieldset>
        <legend>Your Address</legend>
        <div>
          <label>
            Address Line 1: <input type="text" name="address-line-1" />
          </label>
        </div>
        <div>
          <label>
            Address Line 2: <input type="text" name="address-line-2" />
          </label>
        </div>
        <div>
          <label>
            City/Town: <input type="text" name="address-city" />
          </label>
        </div>
        <div>
          <label>
            County: <input type="text" name="address-county" />
          </label>
        </div>
        <div>
          <label>
            Postcode: <input type="text" name="address-postcode" />
          </label>
        </div>
        <input type="submit" value="Submit" />
      </fieldset>
    </form>
  );
};

This should give us something like this...

Now we should install the Firstclasspostcodes React library so that we can integrate it with our app:

npm install @firstclasspostcodes/react --save

The library provides some helpful component that allow us to easily integrate with the API.

Firstly, lets surround our <AddressForm/> component with the <PostcodeLookup/> context, and set our API key:

import { PostcodeLookup } from "@firstclasspostcodes/react";

import { AddressForm } from "./AddressForm";

const apiKey = '1234567890';

export default function App() {
  return (
    <div className="App">
      <PostcodeLookup apiKey={apiKey}>
        <AddressForm />
      </PostcodeLookup>
    </div>
  );
}

Next, looking at the documentation we need to integrate our address form with the React library by adding data-* attributes to our input components. This helps the library know which values to apply to which inputs when a user selects an address.

Our <AddressForm/> component should now look like this:

import { PostcodeLookup } from "@firstclasspostcodes/react";

export const AddressForm = () => {
  return (
    <PostcodeLookup.Address>
      <form>
        <fieldset>
          <legend>Your Address</legend>
          <div>
            <label>
              Address Line 1:
              <input type="text" name="address-line-1" data-address-line1 />
            </label>
          </div>
          <div>
            <label>
              Address Line 2:
              <input type="text" name="address-line-2" data-address-line2 />
            </label>
          </div>
          <div>
            <label>
              City/Town:
              <input type="text" name="address-city" data-address-locality />
            </label>
          </div>
          <div>
            <label>
              County:
              <input type="text" name="address-county" data-address-county />
            </label>
          </div>
          <div>
            <label>
              Postcode:
              <input type="text" name="address-postcode" data-address-postcode />
            </label>
          </div>
          <input type="submit" value="Submit" />
        </fieldset>
      </form>
    </PostcodeLookup.Address>
  );
};

Now we just need to build the part of the form that enables users to enter a postcode and select an address! 🎉

Fortunately, the React library also provides these components for us. Lets build a short input component:

import { PostcodeLookup } from "@firstclasspostcodes/react";

export const AddressLookup = () => {
  return (
    <fieldset>
      <legend>Find your address</legend>
      <PostcodeLookup.Input />
      <PostcodeLookup.Select />
    </fieldset>
  );
};

These components are provided by the library and are pretty basic, they only use basic HTML and make no assumptions about styling; thats left up to you.

Lets add the <AddressLookup/> component to the main application:

import { PostcodeLookup } from "@firstclasspostcodes/react";

import { AddressLookup } from "./AddressLookup";
import { AddressForm } from "./AddressForm";

const apiKey = '1234567890';

export default function App() {
  return (
    <div className="App">
      <PostcodeLookup apiKey={apiKey}>
        <AddressLookup />
        <AddressForm />
      </PostcodeLookup>
    </div>
  );
}

It's nearly time for a beer 🍺, our form is coming together nicely:

Once we add a valid API key, we can enter a postcode and select a matching address! Here's a Codesandbox example of the form we've built in this blog post.