Autocompletar dados da Empresa com React

A melhor experiência de usuário no B2B é não ter que preencher formulários enormes. Veja como buscar a Razão Social e o Endereço de uma empresa apenas digitando o CNPJ.

Uma regra antes do código: a chave de API nunca vai para o navegador. Qualquer pessoa consegue lê-la no código do front-end. O React conversa com o seu back-end, e o back-end chama o cnpj/ob com a chave guardada em variável de ambiente.

1. Back-end (Node.js / Express)

app.get('/api/empresa/:cnpj', async (req, res) => {
  const cnpj = req.params.cnpj.replace(/\D/g, '');
  if (cnpj.length !== 14) return res.status(400).json({ error: 'CNPJ inválido' });

  const r = await fetch(`https://api.cnpjob.com.br/cnpj/${cnpj}`, {
    headers: { 'X-API-Key': process.env.CNPJOB_KEY },
  });
  res.status(r.status).json(await r.json());
});

2. Front-end (React)

import { useState } from 'react';

export default function FormularioEmpresa() {
  const [cnpj, setCnpj] = useState('');
  const [dados, setDados] = useState(null);
  const [erro, setErro] = useState('');

  const buscarCnpj = async () => {
    setErro('');
    const res = await fetch(`/api/empresa/${cnpj.replace(/\D/g, '')}`);
    const json = await res.json();
    if (!res.ok) return setErro(json.error || 'CNPJ não encontrado');
    setDados(json);
  };

  return (
    <div>
      <input value={cnpj} onChange={e => setCnpj(e.target.value)} placeholder="Digite o CNPJ" />
      <button onClick={buscarCnpj}>Buscar</button>
      {erro && <p role="alert">{erro}</p>}

      {dados && (
        <div>
          <h3>{dados.razao_social}</h3>
          <p>{dados.endereco.logradouro}, {dados.endereco.numero} · {dados.endereco.municipio}/{dados.endereco.uf}</p>
          <p>Situação: {dados.situacao}</p>
        </div>
      )}
    </div>
  );
}

Para checar só os dígitos verificadores enquanto a pessoa digita, sem gastar consulta, use GET https://api.cnpjob.com.br/cnpj/validate/:cnpj: é público e não exige chave.