@drivekyte/use-places-search

A React custom hook for places search.

Installation

Run

yarn add @drivekyte/use-places-search

Dependency

The custom hook was built using React Query and requires to wrap your app with <QueryClientProvider client={queryClient}>.

Usage

import usePlacesSearch from '@drivekyte/use-places-search';

const Demo = () => {
  const [search, setSearch] = React.useState<string | undefined>();
  const { isLoading, isSuccess, isError, data } = usePlacesSearch(search, {
    baseUrl: "http://base.url/api",
  });

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        aria-label="search"
        placeholder="7th Ave, New York, NY, USA"
        onChange={handleInputChange}
      />
      {isLoading && <div>Loading...</div>}
      {isError && <div>Error</div>}
      {isSuccess &&
        data.map((place) => (
          <p key={place.formatted_address}>
            {place.map_to?.formatted_address || place.formatted_address}
          </p>
        ))}
    </div>
  )
}

Running Tests

To run tests, run the following command

  yarn test