Netherworld's Pretend Minibar
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@vestwell/react-text-mask

5.1.2 • Public • Published

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:

  1. Clone the repo, git clone git@github.com:text-mask/text-mask.git
  2. cd text-mask
  3. npm install
  4. npm run react:dev
  5. 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.

install

npm i @vestwell/react-text-mask

Downloadsweekly downloads

236

version

5.1.2

license

Unlicense

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability