How to validate ship address in the USA using ReactJS

To validate a shipping address in the USA using React and the Google Maps Geocoding API, follow these steps:

Sign up for a Google Maps API key:

Install the @googlemaps/google-maps-services-js package:

yarn add @googlemaps/google-maps-services-js

Create a new React component for your address validation form:

// AddressValidationForm.js
import React, { useState } from 'react';
import { Client } from '@googlemaps/google-maps-services-js';

const AddressValidationForm = () => {
  const [address, setAddress] = useState('');
  const [validationMessage, setValidationMessage] = useState('');

  const validateAddress = async () => {
    const client = new Client();
    try {
      const response = await client.geocode({
        params: {
          address: address,
          components: 'country:US',
          key: 'YOUR_API_KEY',
        },
      });

      if (response.data.status === 'OK') {
        const formattedAddress = response.data.results[0].formatted_address;
        setValidationMessage(`Valid address: ${formattedAddress}`);
      } else {
        setValidationMessage('Invalid address');
      }
    } catch (error) {
      console.error(error);
      setValidationMessage('Error occurred while validating the address');
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter address"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <button onClick={validateAddress}>Validate Address</button>
      <p>{validationMessage}</p>
    </div>
  );
};

export default AddressValidationForm;

Replace 'YOUR_API_KEY' with the API key you got from Google Cloud Platform.

Import the AddressValidationForm component in your main React component and include it in your JSX:

import React from 'react';
import AddressValidationForm from './AddressValidationForm';

const App = () => {
  return (
    <div>
      <h1>Address Validation</h1>
      <AddressValidationForm />
    </div>
  );
};

export default App;

Now, your React application has a simple form that validates a shipping address in the USA using the Google Maps Geocoding API.

If you want to use React + React Hook Form + Zod:

Install the required packages:

yarn add zod react-hook-form

Create a new Zod schema for the address validation:

// validation.js
import { z } from 'zod';

const AddressValidationSchema = z.object({
  street: z.string().nonempty('Street is required'),
  city: z.string().nonempty('City is required'),
  state: z.string().nonempty('State is required'),
  zip: z
    .string()
    .nonempty('Zip code is required')
    .regex(/^\d{5}(-\d{4})?$/, 'Zip code is invalid'),
});

export default AddressValidationSchema;

Create a new React component for your address validation form:

// AddressValidationForm.js
import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import AddressValidationSchema from './validation';

const AddressValidationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(AddressValidationSchema),
  });

  const onSubmit = (data) => {
    // Perform address validation or submit data
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="street">Street:</label>
        <input id="street" type="text" {...register('street')} />
        {errors.street && <p>{errors.street.message}</p>}
      </div>

      <div>
        <label htmlFor="city">City:</label>
        <input id="city" type="text" {...register('city')} />
        {errors.city && <p>{errors.city.message}</p>}
      </div>

      <div>
        <label htmlFor="state">State:</label>
        <input id="state" type="text" {...register('state')} />
        {errors.state && <p>{errors.state.message}</p>}
      </div>

      <div>
        <label htmlFor="zip">Zip:</label>
        <input id="zip" type="text" {...register('zip')} />
        {errors.zip && <p>{errors.zip.message}</p>}
      </div>

      <button type="submit">Validate Address</button>
    </form>
  );
};

export default AddressValidationForm;

Import the AddressValidationForm component in your main React component and include it in your JSX:

import React from 'react';
import AddressValidationForm from './AddressValidationForm';

const App = () => {
  return (
    <div>
      <h1>Address Validation</h1>
      <AddressValidationForm />
    </div>
  );
};

export default App;

Now, your React application has a form that validates the user's input for the shipping address using Zod schema and react-hook-form.

Keep in mind that using the Google Maps API might incur costs depending on your usage. There are also other APIs available that you can use to validate shipping addresses, such as the USPS Web Tools API, SmartyStreets, or EasyPost. Make sure to review their respective documentation and pricing to find the best fit for your needs.

Think about GDPL too ;)

Article generated by ChatGPT(OpenAI) reviewed by me ;)