JSPM

  • Created
  • Published
  • Downloads 381780
  • Score
    100M100P100Q180104F
  • License CC0-1.0

React input component that accepts mask pattern

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 @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