react-masked-text-input

Input component that accepts mask pattern for React

Usage no npm install needed!

<script type="module">
  import reactMaskedTextInput from 'https://cdn.skypack.dev/react-masked-text-input';
</script>

README

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="(111) 111-1111" />
      </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"
/>