Masked input component for React

Usage no npm install needed!

<script type="module">
  import reactInputMaskPersian from '';



Yet another React component for input masking with attention to small usability details with cursor position, copy-paste, etc.



npm install react-input-mask --save


mask : string

Mask string. Format characters are:
9: 0-9۰-۹
a: A-Z, a-z
*: A-Z, a-z, 0-9۰-۹

Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. For example, German phone mask with unremoveable prefix +49 will look like mask="+4\9 99 999 99" or mask={"+4\\9 99 999 99"}

maskChar : string

Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.

formatChars : object

Defines format characters with characters as keys and corresponding RegExp string as values. Default ones:

  "9": "[0-9]",
  "a": "[A-Za-z]",
  "*": "[A-Za-z0-9]"

alwaysShowMask : boolean

Show mask even in empty input without focus.


var PhoneInput = React.createClass({
  render: function() {
    return <InputElement {...this.props} mask="+4\9 99 999 99" maskChar=" "/>;

Known issues

Screen keyboard backspace may not work in Android 4.x browser due to broken input events.


Thanks to BrowserStack for help with testing on real devices