Address from a CEP

A form that looks the CEP up and fills the street, neighborhood, city and state, with Brazilian Utils in React, Angular, Vue and plain JavaScript.

Type a CEP and the rest of the address fills itself. Pick the framework: each example runs the code below it, which you can copy as is.

getAddressInfoByCep asks the CEP providers and returns the street, neighborhood, city and state, or throws when no one has that CEP. It is asked only once isValidCep says the CEP is complete, so a request is not made on every keystroke, and what comes back stays editable: a lookup fills a form, it does not own it. The document field guide has the mask that keeps the caret where it belongs.

A hook takes the CEP and gives back what is known about it; the form draws that. The CEP field is the one the document field guide builds:

Loading the demo…

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>
  );
}

A resource takes the CEP and gives back what is known about it, reloading when it changes. The CEP field is the one the document field guide builds:

Loading the demo…

Loading the code…

A composable takes the CEP and gives back what is known about it; the form draws that. The CEP field is the one the document field guide builds:

Loading the demo…

Loading the code…

No build step: save it as an .html file and open it. It imports the package from a CDN and drops the answer to a CEP that is no longer the one in the field.

Loading the demo…

address-form.html

Loading the code…

The utilities reference documents getAddressInfoByCep, its providers and what it throws.