CnpjLookupField
Campo de CNPJ com máscara, validação e botão de consulta assíncrona desacoplado.
Carregando...
Instalação
npx @kobana/ui add cnpj-lookup-fieldDependências instaladas automaticamente: input, button (shadcn/ui), lucide-react
Importação
import { CnpjLookupField } from "@/components/kobana/cnpj-lookup-field"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
value | string | — | Valor atual do campo (a máscara é aplicada internamente) |
onChange | (value: string) => void | — | Disparado a cada alteração, recebe o valor já mascarado |
onLookup | (cnpj: string) => Promise<T> | — | Consulta os dados da empresa a partir dos 14 dígitos do CNPJ |
onResult | (data: T) => void | — | Disparado com os dados retornados por onLookup |
onError | (error: unknown) => void | — | Disparado quando a consulta falha |
disabled | boolean | false | Desabilita o campo e o botão de busca |
placeholder | string | "00.000.000/0000-00" | Placeholder do input |
className | string | — | Classes adicionais aplicadas ao container |
Uso
"use client"
import { useState } from "react"
import { CnpjLookupField } from "@/components/kobana/cnpj-lookup-field"
export function Example() {
const [cnpj, setCnpj] = useState("")
async function lookup(digits: string) {
const res = await fetch(`/api/cnpj/${digits}`)
if (!res.ok) throw new Error("CNPJ não encontrado.")
return res.json()
}
return (
<CnpjLookupField
value={cnpj}
onChange={setCnpj}
onLookup={lookup}
onResult={(data) => console.log("empresa", data)}
onError={(err) => console.error(err)}
/>
)
}O componente é desacoplado da fonte de dados: ele não conhece nenhuma URL ou API.
A consulta é totalmente delegada ao callback onLookup, que pode usar uma API pública
(como a minhareceita.org), uma server action ou qualquer outra origem. Erros são
tratados internamente (exibindo o texto em português) e também propagados via onError.
Os utilitários formatCnpj, getCnpjDigits e isValidCnpjLength são exportados junto
ao componente para reuso em formulários.