🏠 Localizing Address Formats: How to Format Addresses Based on Different Countries?

Are you working on a global web application that needs to display addresses in different formats based on the user's location? Address formats can vary significantly from country to country, making it challenging to display them consistently.

🌎 Different Address Formats Around the Globe

First, let's take a look at how address formats vary from country to country. For example, in the United States, a typical street address format is:

John Smith
123 Main Street
Suite 200
Anytown, NY 12345
USA

However, in Canada, the format is slightly different:

John Smith
123 Main Street, Suite 200
Anytown ON  M1R 3R5
Canada

In the UK, the format is:

John Smith
123 Main Street
Anytown
County
AB1 2CD
UK

As you can see, the order of the elements and the use of commas and line breaks can vary significantly from country to country. To display addresses consistently in your application, you'll need to be able to format them based on the user's location.

🛠️ Creating a Utility to Format Addresses

Here's an example utility function that takes an address object and returns a formatted address string:

export function formatAddress(address: Address): string {
  const { street, city, state, postalCode, country } = address;
  const countryCode = getCountryCode(country);
  const countryData = COUNTRIES[countryCode];

  const addressLines = [
    street,
    `${city}, ${state} ${postalCode}`,
    countryData.format,
  ];

  return addressLines.filter((line) => !!line).join('\n');
}

const COUNTRIES = {
  US: {
    name: 'United States',
    format: '{{street}}\n{{city}}, {{state}} {{postalCode}}\n{{name}}',
  },
  CA: {
    name: 'Canada',
    format: '{{street}}\n{{city}}, {{state}} {{postalCode}}\n{{name}}',
  },
  MX: {
    name: 'Mexico',
    format: '{{street}}\n{{postalCode}} {{city}}, {{state}}\n{{name}}',
  },
  GB: {
    name: 'United Kingdom',
    format: '{{street}}\n{{city}}\n{{state}} {{postalCode}}\n{{name}}',
  },
  AU: {
    name: 'Australia',
    format: '{{street}}\n{{city}} {{state}} {{postalCode}}\n{{name}}',
  },
};

function getCountryCode(countryName: string): string {
  const countryCodes = Object.keys(COUNTRIES);
  for (const code of countryCodes) {
    if (COUNTRIES[code].name === countryName) {
      return code;
    }
  }
  throw new Error(`Invalid country name: ${countryName}`);
}

💻 Example

import React from 'react';
import { formatAddress } from './formatAddress';

function Address() {
  const [country, setCountry] = React.useState('United States');

  function handleCurrencyChange(event) {
    setCountry(event.target.value);
  }

  return (
    <div>
      <br />
      <label>
        Country:
        <select value={country} onChange={handleCurrencyChange}>
          <option value="United States">United States</option>
          <option value="Canada">Canada</option>
          <option value="Mexico">Mexico</option>
          <option value="United Kingdom">United Kingdom</option>
          <option value="Australia">Australia</option>
        </select>
      </label>
      <br />
      <pre>
        {formatAddress({
          street: '776 Terminal Dr',
          city: 'Salt Lake City',
          country,
          postalCode: '84122',
          state: 'California',
        })}
      </pre>
    </div>
  );
}

Here is the stackblitz: https://stackblitz.com/edit/react-ts-bs4bh5