✨ use-places-autocomplete 소개: Google Maps Places Autocomplete에 대한 반응 후크

유우 여러분! use-places-autocomplete을 사용하면 농담이 아니라 10분 안에 다음 데모와 같은 나만의 장소 자동완성 UI를 구축할 수 있습니다 😉



⚡️ 직접 해보기: https://use-places-autocomplete.netlify.app

특징

🧠 Google Maps Places API에서 제공하는 지능형 장소 제안을 제공합니다.

🎣 React로 사용자 정의된 자동 완성 UI를 구축합니다hook .

🔧 Utility functions 지오코딩을 수행하고 Google Maps Geocoding API을 사용하여 지리적 좌표를 가져옵니다.

🤑 Google API 비용을 절약할 수 있는 내장형cache mechanism.

💰 Google API 비용을 낮추기 위한 디바운스 메커니즘이 내장되어 있습니다.

🚀 비동기 Google 스크립트 로드를 지원합니다.

📜 TypeScript 유형 정의를 지원합니다.

⌨️ 포괄적인 WAI-ARIA compliant을 통해 UX가 풍부한 구성 요소(예: demo code 및 키워드 지원)를 구축합니다.

🦔 작은 사이즈 ( ~ 1.7KB gzipped ). react를 제외하고는 외부 종속성이 없습니다.

어떻게 작동합니까?

먼저 script 태그를 사용하여 프로젝트에서 라이브러리를 로드합니다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

구성 요소 구축을 시작합니다. 자세한 내용은 API을 확인하세요.

import usePlacesAutocomplete, {
  getGeocode,
  getLatLng,
} from "use-places-autocomplete";
import useOnclickOutside from "react-cool-onclickoutside";

const PlacesAutocomplete = () => {
  const {
    ready,
    value,
    suggestions: { status, data },
    setValue,
    clearSuggestions,
  } = usePlacesAutocomplete({
    requestOptions: {
      /* Define search scope here */
    },
    debounce: 300,
  });
  const ref = useOnclickOutside(() => {
    // When user clicks outside of the component, we can dismiss
    // the searched suggestions by calling this method
    clearSuggestions();
  });

  const handleInput = (e) => {
    // Update the keyword of the input element
    setValue(e.target.value);
  };

  const handleSelect = ({ description }) => () => {
    // When user selects a place, we can replace the keyword without request data from API
    // by setting the second parameter as "false"
    setValue(description, false);
    clearSuggestions();

    // Get latitude and longitude via utility functions
    getGeocode({ address: description })
      .then((results) => getLatLng(results[0]))
      .then(({ lat, lng }) => {
        console.log("📍 Coordinates: ", { lat, lng });
      })
      .catch((error) => {
        console.log("😱 Error: ", error);
      });
  };

  const renderSuggestions = () =>
    data.map((suggestion) => {
      const {
        id,
        structured_formatting: { main_text, secondary_text },
      } = suggestion;

      return (
        <li key={id} onClick={handleSelect(suggestion)}>
          <strong>{main_text}</strong> <small>{secondary_text}</small>
        </li>
      );
    });

  return (
    <div ref={ref}>
      <input
        value={value}
        onChange={handleInput}
        disabled={!ready}
        placeholder="Where are you going?"
      />
      {/* We can use the "status" to decide whether we should display the dropdown or not */}
      {status === "OK" && <ul>{renderSuggestions()}</ul>}
    </div>
  );
};

쉽죠? 이것이 usePlacesAutocomplete ✨의 마법입니다. 최소한의 예를 통해 어떻게 작동하는지 보여 드리겠습니다. 그러나 WAI-ARIA compliant 및 내demo(code 확인)와 같은 키워드 지원, 키워드 지우기 버튼, 검색 기록 등과 같이 UX가 풍부한 자동 완성 구성 요소에 대해 더 많은 작업을 수행할 수 있습니다.

💡 react-cool-onclickoutside is my other hook library, which can help you handle the interaction of user clicks outside of the component(s).

읽어 주셔서 감사합니다. 자세한 사용법은 프로젝트의 GitHub 페이지를 확인하세요. https://github.com/wellyshen/use-places-autocomplete

npm을 통해 배포되는 이 패키지를 설치할 수도 있습니다.

$ yarn add use-places-autocomplete
# or
$ npm install --save use-places-autocomplete

TypeScript로 작업할 때 @types/googlemaps을 devDependencies로 설치해야 합니다.

$ yarn add --dev @types/googlemaps
# or
$ npm install --save-dev @types/googlemaps