react-cp-mexico

Input

Demo

No tiene ningun estilo, pero es completamente customizable. Este componente puede recibir todas las propiedades de un elemento input

import { Cp } from "react-cp-mexico";

export const MyApp = () => {
  const [address, setAddress] = useState({
    cp: "",
    addresses: [],
  });

  return (
    <Cp
      onChange={(list, cp, a) =>
        setAdress((state) => ({
          ...state,
          cp,
          addresses: list,
        }))
      }
      props={{
        placeholder: "Escribe aquí!",
        id: "SoySoloUnId",
        name: "TambienTengoUnName",
        value: 64720,
      }}
    />
  );
};

---

Modal

Demo

Con este componente se renderiza un input numerico que muestra una pantalla modal al terminar de escribir los 5 dígitos.

import { ModalCp } from "react-cp-mexico";
import React, { useState } from "react";

export const MyApp = () => {
  const [address, setAddress] = useState<onChangeModalCp>({
    colonia: "",
    estado: "",
    municipio: "",
    tipoDeZona: "",
    cp: "",
  });

  return <ModalCp onChange={setAddress} />;
};

---

Fetch

Demo

Por defecto, la librería hace uso del API de Amplus. Pero, se puede hacer inyecion de la informacion siempre y cuando se respete el tipado que requiere la propiedad fetchResource. Asi se puede leer desde un excel, json, api, etc.

Código

El ejemplo siguiente toma el parametro del cp para hacer la busqueda, retorna una lista en crudo, pero debería ir el código que se encargar de hacer la busqueda, leer un excel, llamar un api diferente, etc.

import React, { useState } from "react";
import { Cp } from "react-cp-mexico";

export const FetchDemo = () => {
  const [data, setData] = useState([]);

  return (
    <Cp
      onChange={(list, cp, a) => setData(list)}
      fetchResource={async (cp) => {
        return [
          {
            codigoPostal: "64720",
            municipio: {
              nombre: "Monterrey",
              codigo: "039",
              clave: "07",
            },
            colonia: "Unión Miguel Barrera",
            codigoOficina: "64821",
            estado: {
              nombre: "Nuevo León",
              codigo: "19",
            },
            asenta: {
              nombre: "Colonia",
              tipo: "09",
            },
            tipoDeZona: "Urbano",
          },
          {
            codigoPostal: "64720",
            municipio: {
              nombre: "Monterrey",
              codigo: "039",
              clave: "07",
            },
            colonia: "Benito Juárez (F-96)",
            codigoOficina: "64821",
            estado: {
              nombre: "Nuevo León",
              codigo: "19",
            },
            asenta: {
              nombre: "Colonia",
              tipo: "09",
            },
            tipoDeZona: "Urbano",
          },
        ];
      }}
    />
  );
};