react-text-mask

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:

• Clone the repo, git clone [e-mail]:text-mask/text-mask.git
• cd text-mask
• npm install
• npm run react:dev
• 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;
`;

Known issue

#804 In some cases different values in event.target.value and in input element

Contributing

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

Similar packages

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.