Buscar un lugar a partir de una dirección

Muchas API, como las del tiempo y las de mapas, piden una latitud y una longitud, pero la gente conoce su ubicación como una dirección. El hook useGeocode convierte lo uno en lo otro.

import { useGeocode } from "~lib/geocoding";

export const Widget = () => {
  const { data: place } = useGeocode("London, UK");

  return (
    <div>
      {place.name}: {place.lat}, {place.lon}
    </div>
  );
};

Igual que con useFetch, tu widget espera el resultado antes de dibujarse, así que data siempre está disponible.

Combinarlo con una entrada

Deja que la persona que instala tu widget escriba su ubicación en una entrada de tipo Dirección o en una entrada de texto. Léela con useInputs, geocodifícala y pasa las coordenadas a la API que necesites:

import { useFetch } from "~lib/use-fetch";
import { useGeocode } from "~lib/geocoding";
import { useInputs } from "~lib/use-inputs";

type Forecast = {
  readonly temperature: number;
};

export const Widget = () => {
  const { LOCATION } = useInputs();
  const { data: place } = useGeocode(LOCATION);

  const { data: forecast } = useFetch<Forecast>(
    `https://api.example.com/forecast?lat=${place.lat}&lon=${place.lon}`,
  );

  return (
    <div>
      <h2>{place.name}</h2>
      <p className="text-6xl">{forecast.temperature}°C</p>
    </div>
  );
};

Cuando no se encuentra la dirección

Una dirección sin coincidencias también devuelve data, con un error.message que describe el problema y valores provisionales en todo lo demás. Compruébalo antes de usar las coordenadas:

const { data: place } = useGeocode(LOCATION);

if (place.error) {
  return (
    <div>
      Couldn't find "{LOCATION}". Check the address in the Widget's settings.
    </div>
  );
}

Formatos de dirección

Las direcciones se resuelven de forma más fiable con uno de estos formatos:

Formato	Ejemplo
Ciudad, estado, país	"New York, NY, US"
Ciudad, país	"London, UK"
Código postal, país	"10001, US"

Caché

Los resultados se guardan en la caché del proxy, ya que una dirección rara vez cambia de sitio. Todos los marcos que buscan la misma dirección comparten un resultado, así que la geocodificación apenas alarga lo que tarda tu widget en prepararse.

Consulta useGeocode en la referencia para ver todo lo que devuelve.