@msafi/react-text-mask

React input component that accepts mask pattern

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
8,025298Jun 12, 2021Jan 22, 2016Minified + gzip package size for @msafi/react-text-mask in KB

Readme

React Input Mask

Getting started

First, install it.

npm i @msafi/react-text-mask --save

Then, require it and use it.

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

var MyComponent = React.createClass({
  render() {
    return (
      <div>
        <MaskedInput mask="(111) 111-1111" />
      </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="11111"
  className="form-control"
  placeholder="Enter zip code"
  guide={false}
  id="my-input-id"
/>

Example

For a working example, check out the source code of this HTML file.

Documentation

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

License

Public domain - CC0 1.0 Universal

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.