react-input-mask

What is react-input-mask?

The react-input-mask package is a versatile input masking library for React applications. It allows developers to create input fields with predefined formats, ensuring that users enter data in a consistent and expected manner. This is particularly useful for fields like phone numbers, dates, and credit card numbers.

What are react-input-mask's main functionalities?

Basic Input Masking

This feature allows you to create a basic input mask for phone numbers. The mask prop defines the format, and the input field will automatically enforce this format as the user types.

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

function PhoneInput() {
  return (
    <InputMask mask="[phone]" placeholder="Enter phone number" />
  );
}

export default PhoneInput;

Custom Masking Characters

This feature allows you to define custom masking characters. In this example, the mask includes both numbers and letters, and the maskChar prop specifies the character to use for unfilled positions.

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

function CustomMaskInput() {
  return (
    <InputMask mask="99-aaa-9999" maskChar="_" placeholder="Enter custom format" />
  );
}

export default CustomMaskInput;

Masking with Validation

This feature demonstrates how to use input masking with state management and validation. The input field is masked for a credit card number, and the value is managed using React's useState hook.

import React, { useState } from 'react';
import InputMask from 'react-input-mask';

function ValidatedInput() {
  const [value, setValue] = useState('');
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <InputMask mask="9999-9999-9999-9999" value={value} onChange={handleChange} placeholder="Enter credit card number" />
  );
}

export default ValidatedInput;

Other packages similar to react-input-mask

react-text-mask

react-text-mask is another popular library for input masking in React. It offers similar functionality to react-input-mask but also supports masking for other frameworks like Angular and Vue. It provides a flexible API and supports custom mask definitions.

cleave.js

cleave.js is a JavaScript library for formatting input fields. It supports a wide range of input types, including credit cards, phone numbers, and dates. Unlike react-input-mask, cleave.js is not limited to React and can be used with vanilla JavaScript or other frameworks.

imaskjs

imaskjs is a versatile input masking library that supports a wide range of input types and custom masks. It offers a rich set of features, including dynamic masks and pattern matching. imaskjs can be used with React, Angular, Vue, and vanilla JavaScript.

README

react-input-mask

Yet another React component for input masking with attention to small usability details with cursor position, copy-paste, etc.

Demo

Install

npm install react-input-mask --save

Properties

mask : string

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

Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. For example, 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 editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.

formatChars : object

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

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

alwaysShowMask : boolean

Show mask even in empty input without focus.

Example

var PhoneInput = React.createClass({
  render: function() {
    return <InputElement {...this.props} mask="+4\9 99 999 99" maskChar=" "/>;
  }
});

Known issues

Screen keyboard backspace may not work in Android 4.x browser due to broken input events.

Thanks

Thanks to BrowserStack for help with testing on real devices