🏠 Localizing Address Formats: How to Format Addresses Based on Different Countries?
Tags: webdev, javascript, react, angular
Published: 2023-02-28 03:21:26

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. 

<img src="https://media.giphy.com/media/3o6MbodpjnbRh7PglO/giphy.gif">

## 🌎 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:

```css
John Smith
123 Main Street
Suite 200
Anytown, NY 12345
USA
```
However, in Canada, the format is slightly different:

```css
John Smith
123 Main Street, Suite 200
Anytown ON  M1R 3R5
Canada
```
In the UK, the format is:

```css
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:

```javascript

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 


```javascript
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