Endereço pelo CEP

Um formulário que consulta o CEP e preenche rua, bairro, cidade e estado, com Brazilian Utils em React, Angular, Vue e JavaScript puro.

Digite um CEP e o resto do endereço se preenche. Escolha o framework: cada exemplo roda o código logo abaixo dele, que pode ser copiado do jeito que está.

O getAddressInfoByCep pergunta aos provedores de CEP e devolve rua, bairro, cidade e estado, ou lança quando ninguém tem aquele CEP. Ele só é chamado quando o isValidCep diz que o CEP está completo, então não sai uma requisição a cada tecla, e o que volta continua editável: a consulta preenche o formulário, não toma conta dele. O guia do campo de documento tem a máscara que mantém o cursor no lugar.

Um hook recebe o CEP e devolve o que se sabe sobre ele; o formulário desenha isso. O campo de CEP é o que o guia do campo de documento constrói:

Carregando o exemplo…

import { useEffect, useState } from "react";
import { CepField } from "./cep-field";
import { Field } from "./field";
import { useGetAddressByCep } from "./use-get-address-by-cep";

const EMPTY = { street: "", neighborhood: "", city: "", state: "" };
const STATUS = {
  idle: "",
  loading: "Looking it up…",
  found: "",
  failed: "No address for this CEP",
};

export function AddressForm() {
  const [cep, setCep] = useState("");
  const [address, setAddress] = useState(EMPTY);
  const lookup = useGetAddressByCep(cep);

  // What the lookup found is what the form starts from; it stays editable from there.
  useEffect(() => {
    if (lookup.status === "found") setAddress(lookup.address);
    if (lookup.status === "failed") setAddress(EMPTY);
  }, [lookup]);

  return (
    <form onSubmit={(event) => event.preventDefault()}>
      <CepField value={cep} onChange={setCep} errorMessage={STATUS[lookup.status]} />

      {/* The same field the document field guide builds, told what it is about. */}
      <Field
        label="Street"
        autoComplete="address-line1"
        value={address.street}
        onChange={(street) => setAddress({ ...address, street })}
      />
      <Field
        label="Neighborhood"
        value={address.neighborhood}
        onChange={(neighborhood) => setAddress({ ...address, neighborhood })}
      />
      <Field
        label="City"
        autoComplete="address-level2"
        value={address.city}
        onChange={(city) => setAddress({ ...address, city })}
      />
      <Field
        label="State"
        autoComplete="address-level1"
        value={address.state}
        onChange={(state) => setAddress({ ...address, state })}
      />
    </form>
  );
}

Um resource recebe o CEP e devolve o que se sabe sobre ele, recarregando quando ele muda. O campo de CEP é o que o guia do campo de documento constrói:

Carregando o exemplo…

Carregando o código…

Um composable recebe o CEP e devolve o que se sabe sobre ele; o formulário desenha isso. O campo de CEP é o que o guia do campo de documento constrói:

Carregando o exemplo…

Carregando o código…

Sem build: salve como um arquivo .html e abra. Ele importa o pacote de um CDN e descarta a resposta de um CEP que já não é o do campo.

Carregando o exemplo…

address-form.html

Carregando o código…

A referência de utilitários documenta o getAddressInfoByCep, os provedores e o que ele lança.