react-input-mask vs react-maskedinput vs react-number-format vs react-phone-number-input vs react-text-mask
Input Masking Libraries for React
Search packages..
react-input-maskreact-maskedinputreact-number-formatreact-phone-number-inputreact-text-maskSimilar Packages:

Input Masking Libraries for React

Input masking libraries are essential tools in web development that help format user input in real-time, ensuring that data is entered in a specific format. These libraries enhance user experience by providing visual cues and preventing errors, especially for fields that require specific formats such as phone numbers, dates, or numerical values. Each of these libraries offers unique features and functionalities tailored to different use cases, making it crucial for developers to choose the right one based on their project requirements.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
react-input-mask02,289-1398 years agoMIT
react-maskedinput0729-628 years agoMIT
react-number-format04,086244 kB22718 days agoMIT
react-phone-number-input0-10.1 MB-a month agoMIT
react-text-mask08,22748.8 kB333-Unlicense

Feature Comparison: react-input-mask vs react-maskedinput vs react-number-format vs react-phone-number-input vs react-text-mask

Customization

  • react-input-mask:

    react-input-mask offers extensive customization options, allowing developers to define dynamic masks based on user input. This flexibility makes it suitable for a wide range of applications requiring specific formatting.

  • react-maskedinput:

    react-maskedinput provides basic customization features, but it is more limited compared to other libraries. It is best for straightforward use cases where advanced customization is not necessary.

  • react-number-format:

    react-number-format allows for customization of number formats, including currency and percentage formats. Developers can easily define how numbers should be displayed, making it ideal for financial applications.

  • react-phone-number-input:

    react-phone-number-input supports customization for international phone number formats, allowing developers to specify the desired format and validation rules based on country codes.

  • react-text-mask:

    react-text-mask is highly customizable, enabling developers to create complex masks that can adapt to different input scenarios. This makes it suitable for applications requiring unique formatting.

Validation

  • react-input-mask:

    react-input-mask includes built-in validation to ensure that user input adheres to the specified mask. This feature helps prevent errors and improves data integrity.

  • react-maskedinput:

    react-maskedinput provides basic validation capabilities, ensuring that the input matches the defined mask. However, it may not offer advanced validation features found in other libraries.

  • react-number-format:

    react-number-format includes validation for numerical inputs, ensuring that only valid numbers are accepted. This is particularly useful for applications that require strict number formatting.

  • react-phone-number-input:

    react-phone-number-input offers robust validation for phone numbers, checking that the input conforms to international formats and providing feedback to users if the input is invalid.

  • react-text-mask:

    react-text-mask allows for validation based on the defined mask, ensuring that user input matches the expected format. This helps maintain data integrity.

Performance

  • react-input-mask:

    react-input-mask is optimized for performance, making it suitable for applications with high input frequency and complex masking requirements. It efficiently handles user input without significant lag.

  • react-maskedinput:

    react-maskedinput is lightweight and designed for performance, making it a good choice for applications where speed is essential and minimal overhead is desired.

  • react-number-format:

    react-number-format is optimized for handling numerical inputs efficiently, ensuring that formatting does not hinder performance, especially in applications with frequent updates.

  • react-phone-number-input:

    react-phone-number-input is designed for performance, providing a smooth user experience even when validating international phone numbers. It minimizes lag during input.

  • react-text-mask:

    react-text-mask is efficient in handling complex masks, ensuring that performance remains high even with intricate input requirements.

Ease of Use

  • react-input-mask:

    react-input-mask is user-friendly, with a straightforward API that makes it easy for developers to implement and customize input masks without extensive configuration.

  • react-maskedinput:

    react-maskedinput is simple to use, making it ideal for developers looking for a quick solution without the need for complex setup or configuration.

  • react-number-format:

    react-number-format is easy to integrate and use, providing clear documentation and examples that help developers implement number formatting quickly.

  • react-phone-number-input:

    react-phone-number-input is designed with user experience in mind, offering an intuitive interface for entering phone numbers, which enhances usability.

  • react-text-mask:

    react-text-mask is relatively easy to use, but its advanced customization options may require a bit more time to fully understand and implement.

Community Support

  • react-input-mask:

    react-input-mask has a strong community and active maintenance, ensuring that developers can find support and updates easily.

  • react-maskedinput:

    react-maskedinput has a smaller community, which may limit the availability of resources and support compared to more popular libraries.

  • react-number-format:

    react-number-format benefits from a robust community and extensive documentation, making it easy for developers to find help and examples.

  • react-phone-number-input:

    react-phone-number-input has a growing community, providing support and resources for developers implementing international phone number formats.

  • react-text-mask:

    react-text-mask has a solid community backing, with plenty of resources available for troubleshooting and implementation guidance.

How to Choose: react-input-mask vs react-maskedinput vs react-number-format vs react-phone-number-input vs react-text-mask

  • react-input-mask:

    Choose react-input-mask if you need a flexible and customizable input masking solution that allows for dynamic masks and supports various input types. It is ideal for applications that require specific formatting for inputs like dates or credit card numbers.

  • react-maskedinput:

    Select react-maskedinput for a straightforward and lightweight option that provides basic input masking capabilities. It is suitable for simpler applications where minimal configuration is needed and where performance is a priority.

  • react-number-format:

    Opt for react-number-format when you need to handle numerical inputs with formatting options such as currency, percentages, or custom number formats. This library is particularly useful for financial applications where precise number formatting is crucial.

  • react-phone-number-input:

    Use react-phone-number-input if your application requires international phone number input with validation. This library provides a user-friendly interface for entering phone numbers and ensures that the input conforms to international standards.

  • react-text-mask:

    Choose react-text-mask for a highly customizable input masking solution that allows for complex masks and supports various input types. It is ideal for applications that require advanced formatting options and flexibility in user input.

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-maskedinput

react-maskedinput is a React component that provides an easy way to create input fields with masking capabilities. It allows developers to define specific input formats, ensuring that users enter data in a predetermined structure. This is particularly useful for fields like phone numbers, dates, and credit card numbers, where a specific format is required for validation and consistency. By using react-maskedinput, developers can enhance user experience by guiding input and reducing errors.

While react-maskedinput is a great option for input masking, there are several alternatives available in the React ecosystem that offer similar functionality. Here are a few noteworthy alternatives:

  • react-input-mask is a flexible and lightweight input masking library for React. It allows developers to create input fields with customizable masks, making it easy to enforce specific formats. react-input-mask supports various input types and is highly configurable, making it a popular choice for developers looking for a straightforward solution to input masking.
  • react-number-format is a library specifically designed for formatting numeric inputs in React applications. It allows developers to create input fields that handle number formatting, including currency, percentages, and custom formats. While it primarily focuses on numeric inputs, it provides a robust solution for scenarios where number formatting is essential.
  • react-phone-number-input is a specialized input component for handling phone numbers in React applications. It provides a user-friendly interface for entering phone numbers, automatically formatting the input based on the selected country code. This library is particularly useful for applications that require international phone number support.
  • react-text-mask is another input masking library that allows developers to create input fields with custom masks. It provides a simple API for defining masks and supports various input types. react-text-mask is designed to be lightweight and easy to use, making it a solid choice for developers looking for a straightforward masking solution.

To see how these packages compare, check out the comparison: 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-phone-number-input

react-phone-number-input is a React component that provides a user-friendly way to input and validate phone numbers. It supports international phone number formats and allows users to select their country code easily. This package is particularly useful for applications that require phone number input, ensuring that the entered numbers are valid and formatted correctly. With built-in validation and formatting, react-phone-number-input simplifies the process of handling phone numbers in forms.

However, there are several alternatives available that also cater to phone number input in React applications:

  • react-intl-tel-input is another popular library for handling international phone number input in React. It combines the functionality of international phone number formatting with a customizable input field. This library provides a dropdown for selecting country codes and automatically formats the phone number based on the selected country. If you are looking for a solution that integrates well with internationalization and offers a rich user experience, react-intl-tel-input is a solid choice.

  • react-phone-input-2 is a lightweight and easy-to-use library for phone number input in React applications. It features a clean design and supports international phone numbers with country code selection. This library is highly customizable, allowing developers to style the input field according to their application's design requirements. If you need a straightforward solution with a focus on simplicity and ease of use, react-phone-input-2 is an excellent alternative.

To see how these packages compare, check out the comparison: Comparing react-intl-tel-input vs react-phone-input-2 vs react-phone-number-input.

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-input-mask

react-input-mask

Build Status npm version npm downloads

Input masking component for React. Made with attention to UX. Compatible with IE8+.

Demo

Table of Contents

Install

npm install react-input-mask --save

Also you can use it without a module bundler

<!-- Load React first -->
<script src="https://unpkg.com/react/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<!-- Will be exported to window.ReactInputMask -->
<script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script>

Properties

mask : string

Mask string. Default format characters are:
9: 0-9
a: A-Z, a-z
*: A-Z, a-z, 0-9

Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a German phone mask with unremoveable prefix +49 will look like mask="+4\9 99 999 99" or mask={'+4\\9 99 999 99'}

maskChar : string

Character to cover unfilled parts of the mask. Default character is "_". If set to null or empty string, unfilled parts will be empty as in ordinary input.

formatChars : object

Defines format characters with characters as a keys and corresponding RegExp strings as a values. Default ones:

{
  '9': '[0-9]',
  'a': '[A-Za-z]',
  '*': '[A-Za-z0-9]'
}

alwaysShowMask : boolean

Show mask when input is empty and has no focus.

inputRef : function

Use inputRef instead of ref if you need input node to manage focus, selection, etc.

Experimental :fire:

The following props are considered experimental because they are more prone to issues and are likely to be changed in the future. Use with caution.

beforeMaskedValueChange : function

In case you need to implement more complex masking behavior, you can provide beforeMaskedValueChange function to change masked value and cursor position before it will be applied to the input. beforeMaskedValueChange receives following arguments:

  1. newState (object): New input state. Contains value and selection fields. selection is null on input blur or when function is called before input mount. Example: { value: '12/1_/____', selection: { start: 4, end: 4 } }
  2. oldState (object): Input state before change. Contains value and selection fields. selection is null on input focus or when function is called before input mount.
  3. userInput (string): Raw entered or pasted string. null if user didn't enter anything (e.g. triggered by deletion or rerender due to props change).
  4. maskOptions (object): Mask options. Example:
{
  mask: '99/99/9999',
  maskChar: '_',
  alwaysShowMask: false,
  formatChars: {
    '9': '[0-9]',
    'a': '[A-Za-z]',
    '*': '[A-Za-z0-9]'
  },
  permanents: [2, 5] // permanents is an array of indexes of the non-editable characters in the mask
}

beforeMaskedValueChange must return an object with following fields:

  1. value (string): New value.
  2. selection (object): New selection. If selection in newState argument is null, it must be null too.

Please note that beforeMaskedValueChange executes more often than onChange and must be pure.

children : function

NOTE: To make this feature more reliable, please tell about your use case in this issue

To use another component instead of regular <input /> pass render function as a children. Function receives props argument which contains props that aren't used by react-input-mask's internals. I.e. it passes down every prop except the following ones: onChange, onPaste, onMouseDown, onFocus, onBlur, value, disabled, readOnly. These properties, if used, should always be passed directly to react-input-mask instead of children and shouldn't be altered in chldren's function.

import React from 'react';
import InputMask from 'react-input-mask';
import MaterialInput from '@material-ui/core/Input';

// Will work fine
const Input = (props) => (
  <InputMask mask="99/99/9999" value={props.value} onChange={props.onChange}>
    {(inputProps) => <MaterialInput {...inputProps} type="tel" disableUnderline />}
  </InputMask>
);

// Will throw an error because InputMask's and children's onChange aren't the same
const InvalidInput = (props) => (
  <InputMask mask="99/99/9999" value={props.value}>
    {(inputProps) => <MaterialInput {...inputProps} type="tel" disableUnderline onChange={props.onChange} />}
  </InputMask>
);

Examples

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

class PhoneInput extends React.Component {
  render() {
    return <InputMask {...this.props} mask="+4\9 99 999 99" maskChar=" " />;
  }
}

Mask for ZIP Code. Uses beforeMaskedValueChange to omit trailing minus if it wasn't entered by user:

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

class Input extends React.Component {
  state = {
    value: ''
  }

  onChange = (event) => {
    this.setState({
      value: event.target.value
    });
  }

  beforeMaskedValueChange = (newState, oldState, userInput) => {
    var { value } = newState;
    var selection = newState.selection;
    var cursorPosition = selection ? selection.start : null;

    // keep minus if entered by user
    if (value.endsWith('-') && userInput !== '-' && !this.state.value.endsWith('-')) {
      if (cursorPosition === value.length) {
        cursorPosition--;
        selection = { start: cursorPosition, end: cursorPosition };
      }
      value = value.slice(0, -1);
    }

    return {
      value,
      selection
    };
  }

  render() {
    return <InputMask mask="99999-9999" maskChar={null} value={this.state.value} onChange={this.onChange} beforeMaskedValueChange={this.beforeMaskedValueChange} />;
  }
}

Known Issues

Autofill

Browser's autofill requires either empty value in input or value which exactly matches beginning of the autofilled value. I.e. autofilled value "+1 (555) 123-4567" will work with "+1" or "+1 (5", but won't work with "+1 (___) ___-____" or "1 (555)". There are several possible solutions:

  1. Set maskChar to null and trim space after "+1" with beforeMaskedValueChange if no more digits are entered.
  2. Apply mask only if value is not empty. In general, this is the most reliable solution because we can't be sure about formatting in autofilled value.
  3. Use less formatting in the mask.

Please note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what's more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it's a good idea to care about it, while security confirmation code in two-factor authorization shouldn't care about autofill at all.

Thanks

Thanks to BrowserStack for the help with testing on real devices

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.