- プレースホルダーを変更する基本的な方法:
React Google Places Autocompleteでは、
inputProps
というプロパティを使用してプレースホルダーを設定します。以下のコード例を参考にしてください。
import React from 'react';
import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-google-places-autocomplete';
const App = () => {
const handleSelect = async (address) => {
const results = await geocodeByAddress(address);
const latLng = await getLatLng(results[0]);
console.log('Selected location: ', latLng);
};
return (
<div>
<PlacesAutocomplete
inputProps={{ placeholder: 'カスタムプレースホルダー' }}
onSelect={handleSelect}
/>
</div>
);
};
export default App;
上記の例では、inputProps
のplaceholder
プロパティを使用してプレースホルダーを設定しています。'カスタムプレースホルダー'は、任意のテキストに置き換えることができます。
- 言語に基づいてプレースホルダーを変更する方法:
もし特定の言語に基づいてプレースホルダーを変更したい場合は、
react-i18next
などの国際化ライブラリを使用することができます。以下のコード例を参考にしてください。
import React from 'react';
import { useTranslation } from 'react-i18next';
import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-google-places-autocomplete';
const App = () => {
const { t } = useTranslation();
const handleSelect = async (address) => {
const results = await geocodeByAddress(address);
const latLng = await getLatLng(results[0]);
console.log('Selected location: ', latLng);
};
return (
<div>
<PlacesAutocomplete
inputProps={{ placeholder: t('customPlaceholder') }}
onSelect={handleSelect}
/>
</div>
);
};
export default App;
上記の例では、react-i18next
のuseTranslation
フックを使用して、言語に基づいた翻訳を実現しています。t('customPlaceholder')
は、翻訳ファイルで定義されたカスタムプレースホルダーのキーです。
以上がReact Google Places Autocompleteを使用してプレースホルダーを変更する方法です。必要に応じて、コード例をカスタマイズして使用してください。