Como criar um Helper universal para formatar moedas em React
Transforme centavos em reais BRL usando um único utilitário, limpe seu código e reforce padrões de qualidade para qualquer tela do seu projeto React.
Por que isso é importante
Se você mostrar dinheiro de qualquer jeito, você perde confiança. Formatar valores monetários com Helpers deixa seu React pronto para crescer: permita reuso, clareza, internacionalização fácil e futuras integrações sem dor. Aprenda a garantir o mesmo padrão na página de médicos, agendamentos e em todo backoffice – sem repetir lógica.
Helpers: dinheiro bem formatado é respeito ao usuário
Você já tentou exibir valores em reais direto do banco e viu R$ 1999 em vez de R$ 19,99? Isso espanta qualquer usuário. Todo valor precisa de um Helper. Helper significa uma função criada com o único propósito de servir em qualquer página, seja médicos, agendamento ou financeiro.
⚠️Atenção
Jamais formate seu valor de centavos em real direto no componente. Isso gera bugs, códigos duplicados e impede ajustes globais no futuro.
Centralize: helpers vão no SRC e não em cada página
Coloque helpers em uma pasta só, de preferência src/helpers ou src/utils. Isso permite reusar funções como formatar moeda sempre.
ℹ️Dica técnica
Crie um arquivo chamado currency.ts e dê nomes financeiros descritivos, como formatCurrencyInCents.
Função universal: formatando centavos para reais
A função deve receber o valor em centavos e devolver já como real formatado em BRL, exemplo: R$ 19,99 a partir de 1999. Use a API de internacionalização do JavaScript (Intl.NumberFormat).
⚠️Atenção
Sempre divida o valor em centavos por 100 antes de passar ao formatador – senão você exibe números de quatro dígitos.
Exemplo direto ao ponto
No arquivo src/helpers/currency.ts:
✅Exemplo de código
export function formatCurrencyInCents(amount: number): string { return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(amount / 100) }
Importando em qualquer lugar
No seu componente de médicos ou agendamento, basta importar: import {formatCurrencyInCents} from "@/helpers/currency" e usar: {formatCurrencyInCents(valor)}.
⚠️Atenção
Evite nomear helpers de maneira genérica como format ou currency. Seja explícito sobre o que realiza!
Atualize todas as telas de valores
Mude todos os componentes que exibem preço ou cobrança para usarem seu helper único. Isso força o padrão no projeto todo e facilita manutenção.
❌Alerta rápido
Misturar lógica de formatação de moeda no componente quebra o Single Responsibility Principle. Separe sempre.
Plugins, libs e porque fazê-lo manualmente
Apesar de existirem libs para formatação, usar nativo do JS é leve e simplifica dependências. Foque sempre em menos mágicas externas.
ℹ️Alternativa
Se precisar, use dinero.js para regras fiscais avançadas ou formatos multi país.
Reuso: o mesmo helper salva seu futuro
Precisa mostrar valores no dashboard, no recibo, exportar planilha ou enviar e-mail? O mesmo helper serve para todos: qualidade e bug zero.
✅Sucesso
Você ganha manutenção rápida e zero refatoração quando trocar moeda, símbolo, idioma.
Deixe explícito e documente
Coloque comentários simples – // Recebe centavos e devolve R$ – em cada função helper. Pequenos cuidados evitam bugs de futuro.
ℹ️Dica
Comente tipos esperados, formatos de input e exemplos de uso na função.
Teste e cubra seu Helper
Inclua testes unitários. Exemplo: 1999 vira R$ 19,99. 0 vira R$ 0,00. Teste valores negativos e zero.
⚠️Atenção
Não dependa apenas do visual: garanta que a formatação não quebra com entradas inesperadas.
Evite dependências desnecessárias
Menos pacotes, menos falhas, menos atualização. Use sempre a API nativa do JS quando possível. Você ganha performance.
ℹ️Alternativa
Só traga libs externas quando a regulamentação fiscal ou internacionalização exigir, não antes.
Padrão portável: use no web, app, backend
Helpers universais com TypeScript funcionam perfeito no React, mas também podem ir para backend em Node, usando exatamente a mesma lógica.
✅Sucesso
Com TypeScript, os tipos vão garantir durabilidade e autocompletar em qualquer camada do sistema.
O segredo das grandes stacks: código limpo, helper único
Toda empresa grande tem padrão: helpers centralizados, funções documentadas, nada de lógica financeira na view. Esse é o segredo para crescer rápido.
ℹ️Recomendo
Adapte seu código agora mesmo para adotar este padrão e siga para o próximo nível dev!
Continue melhorando: vai mais além?
Quer sair do básico? Veja vídeos e dicas avançadas no canal Dev Doido no Youtube para evoluir seu React do básico ao hiperprodutivo.
✅Onde aprender mais?
Mais práticas como questão de conversão de moedas, internacionalização total e automação? Veja https://www.youtube.com/@DevDoido e mantenha sua stack CrazyStack atualizada!