react-input-mask
Yet another React component for input masking. Made with attention to UX. Compatible with IE8+.
Install
npm install react-input-mask --save
Also you can use it without a module bundler
<!-- Load React first -->
<script src="https://unpkg.com/react/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<!-- Will be exported to window.ReactInputMask -->
<script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script>
Properties
mask : string
Mask string. Default format characters are:
9: 0-9
a: A-Z, a-z
*: A-Z, a-z, 0-9
Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a 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 parts of the mask. Default character is "_". If set to null or empty string, unfilled parts will be empty as in ordinary input.
formatChars : object
Defines format characters with characters as a keys and corresponding RegExp strings as a values. Default ones:
{
'9': '[0-9]',
'a': '[A-Za-z]',
'*': '[A-Za-z0-9]'
}
alwaysShowMask : boolean
Show mask when input is empty and has no focus.
Example
import React from 'react';
import InputMask from 'react-input-mask';
class PhoneInput extends React.Component {
render() {
return <InputMask {...this.props} mask="+4\9 99 999 99" maskChar=" " />;
}
}
