نحوه تأیید اعتبار آدرس کشتی در ایالات متحده با استفاده از ReactJS

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

// 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;

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

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

export default App;

yarn add zod react-hook-form

// 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;

// 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 React from 'react';
import AddressValidationForm from './AddressValidationForm';

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

export default App;