React Hook Formを使用した住所の自動補完方法

Google Places APIを使用する方法: Google Places APIを利用すると、ユーザーが入力した部分の住所を自動的に補完することができます。まず、Google Cloud Platformでプロジェクトを作成し、Places APIを有効にします。次に、react-google-autocompleteパッケージをインストールします。

import React from 'react';
import { useForm } from 'react-hook-form';
import { GoogleAutocomplete } from 'react-google-autocomplete';
const AddressForm = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <GoogleAutocomplete
        {...register('address')}
        apiKey="YOUR_API_KEY"
      />
      <button type="submit">Submit</button>
    </form>
  );
};
export default AddressForm;

郵便番号APIを使用する方法: 日本の場合、郵便番号を入力すると住所が自動的に補完されるAPIが提供されています。以下は、axiosパッケージを使用して郵便番号APIを呼び出し、住所を自動補完する例です。

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import axios from 'axios';
const AddressForm = () => {
  const { register, handleSubmit } = useForm();
  const [address, setAddress] = useState('');
  const onSubmit = (data) => {
    console.log(data);
  };
  const handlePostalCodeChange = async (e) => {
    const postalCode = e.target.value;
    const response = await axios.get(
      `https://postal-code-api.com/api/postal-code/${postalCode}`
    );
    const { address } = response.data;
    setAddress(address);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('postalCode')}
        type="text"
        placeholder="郵便番号"
        onChange={handlePostalCodeChange}
      />
      <input
        {...register('address')}
        type="text"
        placeholder="住所"
        value={address}
        readOnly
      />
      <button type="submit">Submit</button>
    </form>
  );
};
export default AddressForm;

上記の例では、Google Places APIと郵便番号APIの2つの方法を紹介しました。これらの方法を使用することで、React Hook Formを介して住所の自動補完機能を実装することができます。各方法のコード例をご参考にしてください。