Skip to content
Branch: master
Find file History
Latest commit 152b0b7 Jul 25, 2018
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 Remove known issue from react-text-mask doc (#805) Jun 18, 2018
package.json Publish Jul 25, 2018 Publish npm packages May 22, 2016
webpack.buildReactIntegration.js Maintenance (#328) Jan 21, 2017

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 () => (
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}

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

  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
  placeholder="Enter a phone number"
  onBlur={() => {}}
  onChange={() => {}}


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


To see an example of the code running, follow these steps:

  1. Clone the repo, git clone
  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:

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

const MyStyledInput = styled.input`
  background: papayawhip;


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

You can’t perform that action at this time.