react-currency-input-field vs react-input-mask vs react-number-format vs react-numeric-input vs react-text-mask
Input Masking and Formatting Libraries for React
Search packages..
react-currency-input-fieldreact-input-maskreact-number-formatreact-numeric-inputreact-text-maskSimilar Packages:

Input Masking and Formatting Libraries for React

Input masking and formatting libraries for React are tools that help developers create input fields with specific formatting rules. These libraries enhance user experience by guiding users to enter data in a predefined format, such as phone numbers, credit card numbers, dates, or currency values. They can automatically add masks, separators, or formatting as the user types, ensuring that the input is valid and consistent. This is particularly useful for applications that require structured data entry, such as forms, e-commerce sites, and financial applications. By using these libraries, developers can reduce errors, improve data quality, and create a more intuitive interface for users.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
react-currency-input-field0800274 kB86 months agoMIT
react-input-mask02,290-1398 years agoMIT
react-number-format04,083240 kB232a year agoMIT
react-numeric-input0280-598 years agoMIT
react-text-mask08,23548.8 kB334-Unlicense

Feature Comparison: react-currency-input-field vs react-input-mask vs react-number-format vs react-numeric-input vs react-text-mask

Input Masking

  • react-currency-input-field:

    react-currency-input-field does not provide traditional input masking but formats the input as currency while the user types, ensuring the value is always displayed in a currency format.

  • react-input-mask:

    react-input-mask provides robust input masking capabilities, allowing developers to define custom masks for various input types, including phone numbers, dates, and more.

  • react-number-format:

    react-number-format supports input masking for numbers, currencies, and percentages, allowing for customizable formatting and masking as the user types.

  • react-numeric-input:

    react-numeric-input does not provide input masking but restricts input to numeric values, making it easy to enter numbers without additional formatting.

  • react-text-mask:

    react-text-mask allows for the creation of custom input masks, providing flexibility in defining how the input should be formatted as the user types.

Currency Formatting

  • react-currency-input-field:

    react-currency-input-field specializes in currency formatting, automatically adding currency symbols, commas, and decimal points based on the specified currency type.

  • react-input-mask:

    react-input-mask does not handle currency formatting but can be used in conjunction with other libraries to create masked inputs for currency fields.

  • react-number-format:

    react-number-format offers comprehensive currency formatting features, including support for multiple currencies, customizable symbols, and the ability to format values as the user types.

  • react-numeric-input:

    react-numeric-input does not provide built-in currency formatting but can be combined with other libraries to format numeric values as currency.

  • react-text-mask:

    react-text-mask does not provide currency formatting but can be used to create masked input fields for currency values with the help of additional formatting logic.

Customization

  • react-currency-input-field:

    react-currency-input-field allows for some customization, such as changing the currency symbol and formatting rules, but is primarily focused on currency inputs.

  • react-input-mask:

    react-input-mask is highly customizable, allowing developers to create complex mask patterns and define how the input should behave.

  • react-number-format:

    react-number-format offers extensive customization options for formatting numbers, currencies, and percentages, including the ability to set decimal places, thousand separators, and more.

  • react-numeric-input:

    react-numeric-input provides limited customization, primarily around the appearance of the numeric input and the range of values allowed.

  • react-text-mask:

    react-text-mask allows for customization of the mask patterns and the behavior of the input, making it flexible for various use cases.

Ease of Use: Code Examples

  • react-currency-input-field:

    Simple currency input example with react-currency-input-field

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

const CurrencyInputExample = () => {
  return (
    <CurrencyInput
      id="currency-input"
      name="currency"
      placeholder="Enter amount"
      defaultValue=""
      decimalsLimit={2}
      prefix="$"
    />
  );
};

export default CurrencyInputExample;
  • react-input-mask:

    Phone number input example with react-input-mask

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

const PhoneNumberInput = () => {
  return (
    <InputMask mask="(999) 999-9999" placeholder="(123) 456-7890">
      {(inputProps) => <input {...inputProps} />}
    </InputMask>
  );
};

export default PhoneNumberInput;
  • react-number-format:

    Formatted number input example with react-number-format

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

const NumberFormatExample = () => {
  return (
    <NumberFormat
      thousandSeparator
      decimalScale={2}
      fixedDecimalScale
      prefix="$"
      placeholder="Enter amount"
    />
  );
};

export default NumberFormatExample;
  • react-numeric-input:

    Simple numeric input example with react-numeric-input

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

const NumericInputExample = () => {
  return <NumericInput min={0} max={100} step={1} />;
};

export default NumericInputExample;
  • react-text-mask:

    Text input with custom mask using react-text-mask

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

const TextMaskExample = () => {
  return (
    <MaskedInput
      mask={[/[A-Z]/, /[A-Z]/, /[A-Z]/, ' ', /[0-9]/, /[0-9]/, /[0-9]/]}
      placeholder="ABC 123"
    />
  );
};

export default TextMaskExample;

How to Choose: react-currency-input-field vs react-input-mask vs react-number-format vs react-numeric-input vs react-text-mask

  • react-currency-input-field:

    Choose react-currency-input-field if you need a simple and lightweight solution for formatting currency inputs with support for multiple currencies and customizable formatting.

  • react-input-mask:

    Select react-input-mask if you require a flexible and highly customizable input masking solution that supports various mask patterns, including phone numbers, dates, and custom formats.

  • react-number-format:

    Opt for react-number-format if you need a comprehensive library that supports number, currency, and percentage formatting with advanced features like thousand separators, decimal precision, and input validation.

  • react-numeric-input:

    Pick react-numeric-input if you want a straightforward numeric input component that allows users to enter numbers using a spinner interface, making it ideal for scenarios where precise numeric input is required.

  • react-text-mask:

    Use react-text-mask if you need a simple and effective way to create masked input fields with support for custom masks, making it suitable for applications that require specific input formats.

Similar Npm Packages to react-input-mask

react-input-mask is a popular library for creating input fields with masking capabilities in React applications. It allows developers to define specific input formats for various types of data, such as phone numbers, dates, and credit card numbers, enhancing user experience by guiding input and ensuring data consistency. While react-input-mask is a robust solution for input masking, there are several alternatives available that cater to different needs. Here are a few notable ones:

  • react-maskedinput is a simple and flexible input masking library for React. It allows developers to create masked input fields easily, supporting various mask formats. While it may not have all the advanced features of react-input-mask, it provides a straightforward API for basic masking needs. If you are looking for a lightweight solution for simple input masking, react-maskedinput is a good choice.

  • react-number-format is a specialized library for formatting numbers in input fields. It allows developers to create input fields that handle numeric values with various formatting options, such as currency, percentage, and custom number formats. If your primary focus is on number formatting rather than general input masking, react-number-format is an excellent alternative that provides a rich set of features for handling numeric inputs.

  • react-phone-number-input is specifically designed for handling phone number inputs. It provides a user-friendly interface for entering phone numbers, including international formats and validation. If your application requires a dedicated solution for phone number input, react-phone-number-input is a great option that simplifies the process and ensures proper formatting.

  • react-text-mask is another input masking library that focuses on providing a flexible and customizable approach to input masking. It allows developers to define custom masks and handle various input scenarios. If you need more control over the masking behavior and want to create complex input formats, react-text-mask can be a suitable alternative.

For a comprehensive comparison of these libraries, check out the following link: Comparing react-input-mask vs react-maskedinput vs react-number-format vs react-phone-number-input vs react-text-mask.

Similar Npm Packages to react-number-format

react-number-format is a React component that allows developers to format numbers in input fields easily. It provides a flexible way to handle numeric inputs, including formatting for currency, percentages, and custom number formats. This package is particularly useful for applications that require user input for numerical values, ensuring that the input is both user-friendly and visually appealing. While react-number-format is a robust solution for number formatting, there are several alternatives available in the React ecosystem. Here are a few:

  • react-currency-input-field is a specialized input component for handling currency values. It allows users to input currency amounts while automatically formatting the input according to the specified currency format. This package is ideal for applications that require precise currency handling, as it simplifies the process of formatting and validating currency inputs.
  • react-input-mask is a flexible input masking library that allows developers to create custom input masks for various types of data, including numeric inputs. While it is not exclusively focused on number formatting, it provides the ability to enforce specific input patterns, making it suitable for scenarios where you need to control the format of user input, such as phone numbers, dates, or numeric values.
  • react-numeric-input is a simple numeric input component that allows users to input numbers using up and down arrows or by typing directly. It provides basic validation and formatting for numeric inputs, making it a straightforward choice for applications that require simple number input without complex formatting options.
  • react-text-mask is another input masking library that allows developers to create custom input masks for text fields. Similar to react-input-mask, it can be used to enforce specific input formats, including numeric formats. However, it is more focused on text input and may require additional configuration for numeric use cases.

To see how react-number-format compares with its alternatives, check out the comparison: Comparing react-currency-input-field vs react-input-mask vs react-number-format vs react-numeric-input vs react-text-mask.

Similar Npm Packages to react-text-mask

react-text-mask is a library designed to create input masks for React applications. It allows developers to define a specific format for user input, ensuring that the data entered into forms adheres to a particular structure. This can be particularly useful for formatting phone numbers, dates, or any other type of structured input. By providing a clear and consistent input format, react-text-mask enhances user experience and helps prevent input errors.

While react-text-mask is a solid choice for input masking, there are several alternatives available in the React ecosystem that offer similar functionalities. Here are a few noteworthy options:

  • react-input-mask is a flexible input masking library that allows developers to create custom input masks for various types of data. It supports dynamic masks and can handle different input types, making it a versatile choice for many applications. If you need a straightforward solution to implement input masks with a simple API, react-input-mask is an excellent alternative to consider.

  • react-number-format is specifically designed for formatting numerical inputs. It provides features such as currency formatting, percentage formatting, and more. If your application primarily deals with numerical data and requires specific formatting options, react-number-format is a great choice. It simplifies the process of managing number inputs while ensuring that the data remains consistent and user-friendly.

  • react-phone-number-input is a specialized library for handling phone number inputs in React applications. It provides a user-friendly interface for entering phone numbers, complete with validation and formatting. If your application requires a dedicated solution for phone number input, react-phone-number-input offers a comprehensive set of features to ensure that phone numbers are entered correctly and consistently.

To see how these libraries compare, check out the comparison: Comparing react-input-mask vs react-number-format vs react-phone-number-input vs react-text-mask.

README for react-currency-input-field

React Currency Input Field Component

npm npm NPM Codecov Coverage Release build

Features

  • Supports abbreviations (e.g. 1k → 1,000, 2.5m → 2,500,000)
  • Prefix and suffix support (e.g. £, $)
  • Automatically inserts group separators
  • Accepts Intl locale config
  • Keyboard stepping with ArrowUp / ArrowDown
  • Can allow/disallow decimals
  • Written in TypeScript and has type support
  • Zero runtime dependencies (ie. does not depend on any third party packages except for development)
  • Bundle size 7.6kB (Minified), 3.1kB (Minified + Gzipped)

Examples

Play with demo or view examples code

React Currency Input Demo

Install

npm install react-currency-input-field

yarn add react-currency-input-field

pnpm add react-currency-input-field

Usage

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

<CurrencyInput
  id="input-example"
  name="input-name"
  placeholder="Please enter a number"
  defaultValue={1000}
  decimalsLimit={2}
  onValueChange={(value, name, values) => console.log(value, name, values)}
/>;

See src/examples for more patterns covering implementation details and validation helpers.

Props

NameTypeDefaultDescription
allowDecimalsbooleantrueAllow entering decimal values.
allowNegativeValuebooleantrueAllow the user to enter negative numbers.
classNamestringAdditional CSS class names for the rendered input.
customInputReact.ElementTypeinputRender a custom component instead of the native input.
decimalsLimitnumber2Maximum number of fractional digits the user can type.
decimalScalenumberPads or trims decimals on blur to the specified length.
decimalSeparatorstringlocale defaultCharacter used to separate the integer and fractional parts. Cannot be numeric or match the group separator.
defaultValuenumber | stringInitial value when the component is uncontrolled.
valuenumber | stringControlled value supplied by the parent component.
disabledbooleanfalseDisable user interaction.
disableAbbreviationsbooleanfalseDisable shorthand parsing (1k, 2m, 3b, etc.).
disableGroupSeparatorsbooleanfalsePrevent automatic insertion of group separators (e.g. keep 1000 instead of 1,000).
fixedDecimalLengthnumberForces the value to always display with the specified number of decimals on blur.
formatValueOnBlurbooleantrueWhen set to false, the onValueChange will not be called on blur events.
groupSeparatorstringlocale defaultCharacter used to group thousands. Cannot be numeric.
idstringForwarded to the rendered input element.
intlConfigIntlConfigLocale configuration for Intl.NumberFormat (locale, currency, style).
maxLengthnumberMaximum number of characters (excluding the negative sign) the user can enter.
onValueChangefunctionHandler fired whenever the parsed value changes.
placeholderstringDisplayed when there is no value.
prefixstringString added before the value (e.g. £, $). Overrides locale-derived prefixes.
suffixstringString added after the value (e.g. %, €). Overrides locale-derived suffixes.
stepnumberIncrement applied when pressing ArrowUp / ArrowDown.
transformRawValuefunctionIntercept and adjust the raw input string before parsing. Must return a string.

onValueChange

Handle changes to the value.

onValueChange = (value, name, values) => void;

value

value will give you the value in a string format, without the prefix/suffix/separators.

Useful for displaying the value, but you can use values.float if you need the numerical value for calculations.

Example: £123,456 -> 123456

name

name is the name you have passed to your component

values

values gives an object with three key values:

  • float: Value as float or null if empty. Example: "1.99" > 1.99
  • formatted: Value after applying formatting. Example: "1000000" > "1,000,0000"
  • value: Non formatted value as string, ie. same as first param.

Abbreviations

It can parse values with abbreviations k, m and b

Examples:

  • 1k = 1,000
  • 2.5m = 2,500,000
  • 3.456B = 3,456,000,000

This can be turned off by passing in disableAbbreviations={true}.

Prefix and Suffix

You can add a prefix or suffix by passing in prefix or suffix.

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

<CurrencyInput prefix="£" value={123} />;
// £123

<CurrencyInput suffix="%" value={456} />;
// 456%

Note: Passing in prefix/suffix will override the intl locale config.

Separators

You can change the decimal and group separators by passing in decimalSeparator and groupSeparator.

Example:

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

<CurrencyInput decimalSeparator="," groupSeparator="." />;

Note: the separators cannot be a number, and decimalSeparator must be different to groupSeparator.

To turn off auto adding the group separator, add disableGroupSeparators={true}.

Intl Locale Config

This component can also accept international locale config to format the currency to locale setting.

Examples:

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

// US Dollar
<CurrencyInput intlConfig={{ locale: 'en-US', currency: 'USD' }} />

// British Pound
<CurrencyInput intlConfig={{ locale: 'en-GB', currency: 'GBP' }} />

// Canadian Dollar
<CurrencyInput intlConfig={{ locale: 'en-CA', currency: 'CAD' }} />

// Australian Dollar
<CurrencyInput intlConfig={{ locale: 'en-AU', currency: 'AUD' }} />

// Japanese Yen
<CurrencyInput intlConfig={{ locale: 'ja-JP', currency: 'JPY' }} />

// Chinese Yuan
<CurrencyInput intlConfig={{ locale: 'zh-CN', currency: 'CNY' }} />

// Euro (Germany)
<CurrencyInput intlConfig={{ locale: 'de-DE', currency: 'EUR' }} />

// Euro (France)
<CurrencyInput intlConfig={{ locale: 'fr-FR', currency: 'EUR' }} />

// Indian Rupee
<CurrencyInput intlConfig={{ locale: 'hi-IN', currency: 'INR' }} />

// Brazilian Real
<CurrencyInput intlConfig={{ locale: 'pt-BR', currency: 'BRL' }} />

locale should be a BCP 47 language tag, such as "en-US" or "en-IN".

currency should be a ISO 4217 currency code, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.

Any prefix, suffix, group separator and decimal separator options passed in will override the default locale settings.

Decimal Scale and Decimals Limit

decimalsLimit and decimalScale sound similar but have different usages.

decimalsLimit prevents the user from typing more than the limit, and decimalScale will format the decimals onBlur to the specified length, padding or trimming as necessary.

Example:

If decimalScale is 2

- 1.5 becomes 1.50 (padded)
- 1.234 becomes 1.23 (trimmed)

---

If decimalLimit is 2

- User enters 1.23
- User is then prevented from entering another value

Fixed Decimal Length

Use fixedDecimalLength so that the value will always have the specified length of decimals.

This formatting happens onBlur.

Example if fixedDecimalLength was 2:

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

Format values for display

Use the formatValue function to format the values to a more user friendly string. This is useful if you are displaying the value somewhere else ie. the total of multiple inputs.

import { formatValue } from 'react-currency-input-field';

// Format using prefix, groupSeparator and decimalSeparator
const formattedValue1 = formatValue({
  value: '123456',
  groupSeparator: ',',
  decimalSeparator: '.',
  prefix: '$',
});

console.log(formattedValue1);
// $123,456

// Format using intl locale config
const formattedValue2 = formatValue({
  value: '500000',
  intlConfig: { locale: 'hi-IN', currency: 'INR' },
});

console.log(formattedValue2);
// ₹5,00,000

Issues

Feel free to raise an issue on Github if you find a bug or have a feature request.

Contributing

If you would like to contribute to this repository, please refer to the contributing doc.

Support this Project

If you'd like to support this project, please refer to the support doc.

v4.0.0 Announcement

I'm excited to announce the release of v4.0.0.

This marks the beginning of development for version 4.0.0, and the first improvement is a significant reduction in bundle size, going from ~26KB to ~7.6kB (Minified), 3.1kB (Minified + Gzipped)

For more information, please refer to the announcement post.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.