Package Exports

react-text-mask

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-text-mask) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Input Mask

Getting started

First, install it.

npm i react-text-mask --save

Then, require it and use it.

var React = require('react')
var MaskedInput = require('react-text-mask')

var MyComponent = React.createClass({
  render() {
    return (
      <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 to it CSS classes, a placeholder attribute, or whatever.

For example, the following works:

<MaskedTextInput
  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"
/>

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 git@github.com: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.

Contributing

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