Skip to content
Branch: master
Find file History
Latest commit 152b0b7 Jul 25, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
dist Publish Jul 25, 2018
example Update for react 15.5 (#497) Apr 15, 2017
src Refactor ref as Component's instance function (#808) Jul 24, 2018
test Fix issue #806 (#807) Jul 24, 2018
LICENSE Improve docs (#212) Sep 12, 2016
README.md Remove known issue from react-text-mask doc (#805) Jun 18, 2018
package.json Publish Jul 25, 2018
publish.sh Publish npm packages May 22, 2016
webpack.buildReactIntegration.js Maintenance (#328) Jan 21, 2017

README.md

React Input Mask

Getting started

First, install it.

npm i react-text-mask --save

Then, require it and use it.

import React from 'react'
import MaskedInput from 'react-text-mask'

export default () => (
  <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 it CSS classes, a placeholder attribute, or even an onBlur handler.

For example, the following works:

<MaskedInput
  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"
  onBlur={() => {}}
  onChange={() => {}}
/>

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.

Customize Rendered <input> Component

For advanced uses, you can customize the rendering of the resultant <input> via a render prop. This is entirely optional, if no render prop is passed, a normal <input> is rendered.

For example, to use with styled-components, which requires an innerRef:

<MaskedInput
  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
  placeholder="Enter a phone number"
  id="my-input-id"
  render={(ref, props) => (
    <MyStyledInput innerRef={ref} {...props} />
  )}
/>

const MyStyledInput = styled.input`
  background: papayawhip;
`;

Contributing

We would love some contributions! Check out this document to get started.

You can’t perform that action at this time.