react-number-format oferece formatação avançada de números, incluindo suporte para valores monetários, porcentagens e números com separadores de milhar. Ele permite que você defina regras de formatação personalizadas e fornece formatação em tempo real à medida que o usuário digita.

react-input-mask não fornece formatação de valores numéricos ou monetários, pois se concentra na aplicação de máscaras de entrada baseadas em padrões. A formatação é determinada pela máscara que você define, e os valores são inseridos no formato especificado pela máscara.

react-text-mask não fornece formatação numérica ou monetária, pois se concentra em aplicar máscaras de texto. A formatação dos valores é determinada pela máscara de texto aplicada, e os dados são inseridos no formato definido pela máscara.

react-currency-input-field fornece formatação automática de valores monetários à medida que o usuário digita, incluindo suporte para diferentes símbolos de moeda e formatação de casas decimais. Ele garante que os valores sejam sempre exibidos em um formato monetário apropriado, o que é crucial para aplicativos financeiros.

react-numeric-input fornece formatação básica de valores numéricos, mas é mais focado na entrada de números do que na formatação. Ele exibe os valores inseridos pelo usuário sem formatação avançada, mas permite que você defina limites e incrementos para a entrada numérica.

react-number-format não fornece máscaras de entrada, mas permite a formatação de números enquanto o usuário digita. Ele se concentra mais na formatação e validação de valores numéricos do que na aplicação de máscaras.

react-input-mask permite a criação de máscaras de entrada personalizadas, como números de telefone, CPF e outros formatos. Você pode definir máscaras estáticas ou dinâmicas, e a biblioteca garante que os usuários insiram dados no formato correto.

react-text-mask é uma biblioteca dedicada à aplicação de máscaras de texto em campos de entrada. Ela permite que você crie máscaras de entrada personalizadas usando componentes React, garantindo que os dados sejam inseridos em um formato específico.

react-currency-input-field não utiliza máscaras de entrada, mas sim formata os valores à medida que são digitados, garantindo que a entrada do usuário seja sempre um valor monetário válido. A máscara é implícita na formatação do campo de entrada.

react-numeric-input não suporta máscaras de entrada, pois é um componente de entrada numérica simples. Ele permite a entrada direta de números e fornece botões para incremento e decremento, mas não aplica nenhuma máscara aos valores inseridos.

react-number-format fornece validação de entrada para garantir que os valores inseridos sejam numéricos e estejam em conformidade com as regras de formatação definidas. Ele suporta validação de valores monetários, porcentagens e números com separadores de milhar.

react-input-mask valida a entrada com base na máscara definida. Ele garante que os usuários insiram dados no formato correto, mas a validação é limitada ao padrão da máscara. Você pode adicionar lógica de validação adicional conforme necessário.

react-text-mask valida a entrada com base na máscara de texto aplicada. Ele garante que os dados inseridos estejam no formato correto, mas a validação é limitada ao padrão da máscara.

react-currency-input-field valida a entrada do usuário para garantir que ela corresponda a um formato monetário válido. Ele lida automaticamente com a validação de valores, incluindo a verificação de entradas não numéricas e a garantia de que os valores estejam dentro de um intervalo aceitável.

react-numeric-input valida a entrada para garantir que os valores estejam dentro dos limites definidos (mínimo e máximo). Ele permite a entrada de números inteiros e decimais, mas a validação é básica e depende das restrições definidas pelo desenvolvedor.

Exemplo de Formatação de Número com react-number-format

import React from 'react';
import { NumberFormat } from 'react-number-format';

const NumberFormatExample = () => {
  return (
    <div>
      <label htmlFor="number">Número:</label>
      <NumberFormat
        id="number"
        placeholder="Digite um número"
        onValueChange={(values) => {
          const { formattedValue, value } = values;
          console.log(formattedValue); // Valor formatado
          console.log(value); // Valor não formatado
        }}
        isNumericString
        decimalScale={2} // Limite de casas decimais
        fixedDecimalScale
        thousandSeparator
        prefix="$" // Prefixo de moeda
      />
    </div>
  );
};

export default NumberFormatExample;

Exemplo de Máscara de Entrada com react-input-mask

import React from 'react';
import InputMask from 'react-input-mask';

const InputMaskExample = () => {
  return (
    <div>
      <label htmlFor="phone">Telefone:</label>
      <InputMask
        id="phone"
        mask="(99) 99999-9999" // Máscara de telefone
        placeholder="Digite seu telefone"
        onChange={(e) => {
          console.log(e.target.value); // Valor com máscara
        }}
      />
    </div>
  );
};

export default InputMaskExample;

Exemplo de Máscara de Texto com react-text-mask

import React from 'react';
import { MaskedInput } from 'react-text-mask';

const TextMaskExample = () => {
  return (
    <div>
      <label htmlFor="cpf">CPF:</label>
      <MaskedInput
        id="cpf"
        mask={[
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
          /
          /,
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
          /[0-9]/,
        ]} // Máscara de CPF
        placeholder="Digite seu CPF"
        onChange={(e) => {
          console.log(e.target.value); // Valor com máscara
        }}
      />
    </div>
  );
};

export default TextMaskExample;

Exemplo de Campo de Entrada Monetária com react-currency-input-field

import React from 'react';
import CurrencyInput from 'react-currency-input-field';

const CurrencyInputExample = () => {
  return (
    <div>
      <label htmlFor="currency">Valor Monetário:</label>
      <CurrencyInput
        id="currency"
        name="currency"
        placeholder="Digite um valor"
        defaultValue="" // Valor padrão
        decimalsLimit={2} // Limite de casas decimais
        onValueChange={(value, name) => {
          console.log(value); // Valor monetário formatado
        }}
      />
    </div>
  );
};

export default CurrencyInputExample;

Exemplo de Entrada Numérica com react-numeric-input

import React from 'react';
import NumericInput from 'react-numeric-input';

const NumericInputExample = () => {
  return (
    <div>
      <label htmlFor="numeric">Número:</label>
      <NumericInput
        id="numeric"
        min={0} // Valor mínimo
        max={100} // Valor máximo
        step={1} // Incremento
        onChange={(value) => {
          console.log(value); // Valor numérico
        }}
      />
    </div>
  );
};

export default NumericInputExample;