react-masked-text-input

Masked Text Input for React

This component let's you create a masked text input for React. See the demo here.

Getting started

First, install it.

npm i react-masked-text-input --save

Then, require it and use it.

var React = require('react')
var MaskedTextInput = require('react-masked-text-input')

var MyComponent = React.createClass({
  render() {
    return (
      <div>
        <MaskedTextInput pattern="[phone]" />
      </div>
    )
  }
})

Note that <MaskedTextInput/> is fully compatible with <input type="text"/> element. So, you can pass to it CSS classes, a placeholder attribute, or whatever.

For example, the following works:

<MaskedTextInput
  pattern="11111"
  className="form-control"
  placeholder="Enter zip code"
  id="my-input-id"
/>