react-text-mask

What is react-text-mask?

The react-text-mask package is a versatile library for creating input masks in React applications. It allows developers to define patterns for user input, ensuring that the data entered conforms to specific formats such as phone numbers, dates, and credit card numbers.

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

Basic Input Masking

This feature allows you to create a masked input for phone numbers. The mask pattern ensures that the input follows the format [phone].

```jsx
import React from 'react';
import MaskedInput from 'react-text-mask';

const PhoneInput = () => (
  <MaskedInput
    mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
    placeholder="Enter a phone number"
  />
);

export default PhoneInput;
```

Dynamic Masking

This feature demonstrates how to dynamically change the mask based on the input value. The mask changes from a 4-digit to an 8-digit format as the user types.

```jsx
import React, { useState } from 'react';
import MaskedInput from 'react-text-mask';

const DynamicMaskInput = () => {
  const [mask, setMask] = useState([/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]);

  const handleChange = (e) => {
    const value = e.target.value;
    if (value.length > 4) {
      setMask([/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]);
    } else {
      setMask([/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]);
    }
  };

  return (
    <MaskedInput
      mask={mask}
      placeholder="Enter a value"
      onChange={handleChange}
    />
  );
};

export default DynamicMaskInput;
```

Custom Mask Component

This feature allows you to create a custom mask for currency input. The mask pattern ensures that the input follows the format $123,456.78.

```jsx
import React from 'react';
import MaskedInput from 'react-text-mask';

const CustomMaskInput = () => (
  <MaskedInput
    mask={['$', /\d/, /\d/, /\d/, ',', /\d/, /\d/, /\d/, '.', /\d/, /\d/]}
    placeholder="Enter an amount"
  />
);

export default CustomMaskInput;
```

Other packages similar to react-text-mask

react-input-mask

react-input-mask is another popular library for creating input masks in React applications. It offers similar functionality to react-text-mask but is often praised for its simplicity and ease of use. It supports both controlled and uncontrolled components and provides a straightforward API for defining masks.

cleave.js

Cleave.js is a JavaScript library for formatting input fields. It can be used with React to create input masks for various formats such as credit card numbers, phone numbers, and dates. Cleave.js is known for its flexibility and extensive customization options, making it a strong alternative to react-text-mask.

react-maskedinput

react-maskedinput is a lightweight library for creating masked input fields in React. It provides a simple API for defining masks and supports a wide range of input formats. While it may not have as many features as react-text-mask, it is a good choice for developers looking for a minimalistic solution.

README

React Input Mask

Getting started

First, install it.

npm i react-text-mask --save

Then, require it and use it.

import React from 'react'
import MaskedInput from 'react-text-mask'

export default () => (
  <div>
    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
    />
  </div>
)

<MaskedInput/> is fully compatible with <input/> element. So, you can pass it CSS classes, a placeholder attribute, or even an onBlur handler.

For example, the following works:

<MaskedInput
  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
  className="form-control"
  placeholder="Enter a phone number"
  guide={false}
  id="my-input-id"
  onBlur={() => {}}
  onChange={() => {}}
/>

Documentation

For more information about the props that you can pass to the component, see the documentation here.

Example

To see an example of the code running, follow these steps:

1. Clone the repo, git clone [e-mail]:text-mask/text-mask.git
2. cd text-mask
3. npm install
4. npm run react:dev
5. Open http://localhost:3000

The code of the example is in react/example.

Customize Rendered <input> Component

For advanced uses, you can customize the rendering of the resultant <input> via a render prop. This is entirely optional, if no render prop is passed, a normal <input> is rendered.

For example, to use with styled-components, which requires an innerRef:

<MaskedInput
  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
  placeholder="Enter a phone number"
  id="my-input-id"
  render={(ref, props) => (
    <MyStyledInput innerRef={ref} {...props} />
  )}
/>

const MyStyledInput = styled.input`
  background: papayawhip;
`;

Contributing

We would love some contributions! Check out this document to get started.