npm package 'react-maskedinput'

Popularity: Medium (more popular than 90% of all packages)
Description: Masked <input/> React component
Installation: npm install react-maskedinput
Last version: 4.0.1 (Download)
Homepage: https://github.com/insin/react-maskedinput
Size: 0 kB
License: MIT
Keywords: react, masked, input, react-component

Activity

Last modified: January 26, 2018 2:49 AM (5 years ago)
Versions released in one year: 0
Weekly downloads: 21,625
01/30/202204/24/202207/31/202207,00014,00021,00028,000released versions / week
  • Versions released
  • Weekly downloads

What's new in version 4.0.1

Delta between version 4.0.0 and version 4.0.1

Source: Github
Commits:
  • 0efd70261ad5463ef40c9140ef553e1f79453df9, October 20, 2017 1:23 PM:
    Include React 16 in peerDependencies (#115)
  • 9865ec5b5b4265adb50bd3fe14015e8f1c6df3b6, October 20, 2017 1:26 PM:
    Fix wrong scope in paste event (#108)
  • 79a6456fe14840c46b2880bccbf629b661c024d8, October 20, 2017 1:26 PM:
    Fix autofill scenarios by using data from onchange events (#112)
    
    Side effects:
      1) Delete behavior now allows removal of more than one character
      2) Cut now shifts remaining characters left instead of leaving "hole"
    
    Also fix binding of this._updateInputSelection (cf. https://github.com/insin/react-maskedinput/pull/110)
  • aa2dddae57f9b966602a3cd513456cd9e14e0bda, January 24, 2018 3:09 AM:
    Update devDependencies - nwb@0.21 fixes the UMD build
  • ae37ec30f346e44079fefdaffdfc4ea7658eb492, January 24, 2018 3:10 AM:
    Update CHANGES
    
    [ci skip]
  • ba46750ad4124449a79cdbe376361f1055324522, January 24, 2018 3:11 AM:
    Add Node.js 8 to test matrix
  • be50d5ecc5da78aa0ae4fd3e42fb1e37563ff7f5, January 24, 2018 3:11 AM:
    Fix a typo
    
    [ci skip]
  • db7335be221f2c2a262ca630a7461a3d8c214fb6, January 26, 2018 2:41 AM:
    Update syntax in component and examples
  • efbb63320bd5f051b163f1f0a5586c746862be41, January 26, 2018 2:47 AM:
    Release v4.0.1
Files changed:
.travis.yml CHANGED
@@ -2,4 +2,5 @@ language: node_js
2
  node_js:
3
  - 4
4
  - 6
 
5
  script: npm test
2
  node_js:
3
  - 4
4
  - 6
5
+ - 8
6
  script: npm test
CHANGES.md CHANGED
@@ -1,3 +1,13 @@
 
 
 
 
 
 
 
 
 
 
1
  ## 4.0.0 / 2017-07-04
2
 
3
  * Potential breaking change as the `peerDependencies` range has been changed from `"0.14.x || 15.x"` to `"^0.14.9 || ^15.3.0"`.
1
+ ## 4.0.1 / 2018-01-26 🇦🇺
2
+
3
+ * Fix auto-fill scenarios by using data from `onChange` events [[#112]((https://github.com/insin/react-maskedinput/pull/112)]
4
+
5
+ * Fix wrong scope in `onPaste` event [[#108]((https://github.com/insin/react-maskedinput/pull/108)]
6
+
7
+ * Include React 16 in `peerDependencies` [[#115]((https://github.com/insin/react-maskedinput/pull/115)]
8
+
9
+ * Update nwb to 0.21.x to fix UMD build, which was exporting an object with a `default` property
10
+
11
  ## 4.0.0 / 2017-07-04
12
 
13
  * Potential breaking change as the `peerDependencies` range has been changed from `"0.14.x || 15.x"` to `"^0.14.9 || ^15.3.0"`.
CONTRIBUTING.md CHANGED
@@ -4,7 +4,7 @@
4
 
5
  ## Installation
6
 
7
- * Running `npm install` in the components's root directory will install everything you need for development.
8
 
9
  ## Demo Development Server
10
 
4
 
5
  ## Installation
6
 
7
+ * Running `npm install` in the component's root directory will install everything you need for development.
8
 
9
  ## Demo Development Server
10
 
README.md CHANGED
@@ -10,15 +10,13 @@ A [React](http://facebook.github.io/react/) component for `<input>` masking, bui
10
 
11
  ### npm
12
 
13
- `MaskedInput` can be used on the server, or bundled for the client using an npm-compatible packaging system such as [Browserify](http://browserify.org/) or [webpack](http://webpack.github.io/).
14
-
15
  ```
16
  npm install react-maskedinput --save
17
  ```
18
 
19
  ### Browser bundle
20
 
21
- The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` (>= 0.14.0) variable to work with.
22
 
23
  * [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version)
24
  * [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)
@@ -28,21 +26,19 @@ The browser bundle exposes a global `MaskedInput` variable and expects to find a
28
  Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback:
29
 
30
  ```javascript
31
- var React = require('react')
32
- var MaskedInput = require('react-maskedinput')
33
 
34
- var CreditCardDetails = React.createClass({
35
- state: {
36
  card: '',
37
  expiry: '',
38
  ccv: ''
39
- },
40
 
41
- _onChange(e) {
42
- var stateChange = {}
43
- stateChange[e.target.name] = e.target.value
44
- this.setState(stateChange)
45
- },
46
 
47
  render() {
48
  return <div className="CreditCardDetails">
@@ -60,28 +56,26 @@ var CreditCardDetails = React.createClass({
60
  </label>
61
  </div>
62
  }
63
- })
64
  ```
65
 
66
  Create some wrapper components if you have a masking configuration which will be reused:
67
 
68
  ```javascript
69
- var CustomInput = React.createClass({
70
- render() {
71
- return <MaskedInput
72
- mask="1111-WW-11"
73
- placeholder="1234-WW-12"
74
- size="11"
75
- {...this.props}
76
- formatCharacters={{
77
- 'W': {
78
- validate(char) { return /\w/.test(char ) },
79
- transform(char) { return char.toUpperCase() }
80
- }
81
  }
82
- }/>
83
- }
84
- })
85
  ```
86
 
87
  ## Props
10
 
11
  ### npm
12
 
 
 
13
  ```
14
  npm install react-maskedinput --save
15
  ```
16
 
17
  ### Browser bundle
18
 
19
+ The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` variable to work with.
20
 
21
  * [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version)
22
  * [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)
26
  Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback:
27
 
28
  ```javascript
29
+ import React from 'react'
30
+ import MaskedInput from 'react-maskedinput'
31
 
32
+ class CreditCardDetails extends React.Component {
33
+ state = {
34
  card: '',
35
  expiry: '',
36
  ccv: ''
37
+ }
38
 
39
+ _onChange = (e) => {
40
+ this.setState({[e.target.name]: e.target.value})
41
+ }
 
 
42
 
43
  render() {
44
  return <div className="CreditCardDetails">
56
  </label>
57
  </div>
58
  }
59
+ }
60
  ```
61
 
62
  Create some wrapper components if you have a masking configuration which will be reused:
63
 
64
  ```javascript
65
+ function CustomInput(props) {
66
+ return <MaskedInput
67
+ mask="1111-WW-11"
68
+ placeholder="1234-WW-12"
69
+ size="11"
70
+ {...props}
71
+ formatCharacters={{
72
+ 'W': {
73
+ validate(char) { return /\w/.test(char ) },
74
+ transform(char) { return char.toUpperCase() }
 
 
75
  }
76
+ }}
77
+ />
78
+ }
79
  ```
80
 
81
  ## Props
demo/src/index.js CHANGED
@@ -27,9 +27,7 @@ class App extends React.Component {
27
  }
28
 
29
  _onChange = (e) => {
30
- const stateChange = {}
31
- stateChange[e.target.name] = e.target.value
32
- this.setState(stateChange)
33
  }
34
 
35
  _changePattern = (e) => {
@@ -99,7 +97,7 @@ class App extends React.Component {
99
  <label htmlFor="changing">Credit Card:</label>
100
  <MaskedInput mask={this.state.cardPattern} name="creditCard" id="creditCard" onChange={this._onCardChange}/>
101
  </div>
102
- <p>Custom format character (W=[a-zA-Z0-9_], transformed to uppercase) and placeholder character (en space):</p>
103
  <div className="form-field">
104
  <label htmlFor="custom">Custom:</label>
105
  <CustomInput name="custom" id="custom" onChange={this._onChange}/>
@@ -112,7 +110,7 @@ class App extends React.Component {
112
  }
113
  }
114
 
115
- const CustomInput = (props) =>
116
  <MaskedInput
117
  mask="1111-WW-11"
118
  placeholder="1234-WW-12"
@@ -121,8 +119,8 @@ const CustomInput = (props) =>
121
  {...props}
122
  formatCharacters={{
123
  'W': {
124
- validate(char) { return /\w/.test(char) },
125
- transform(char) { return char.toUpperCase() }
126
  }
127
  }}
128
  />
27
  }
28
 
29
  _onChange = (e) => {
30
+ this.setState({[e.target.name]: e.target.value})
 
 
31
  }
32
 
33
  _changePattern = (e) => {
97
  <label htmlFor="changing">Credit Card:</label>
98
  <MaskedInput mask={this.state.cardPattern} name="creditCard" id="creditCard" onChange={this._onCardChange}/>
99
  </div>
100
+ <p>Custom format character (<code>W=[a-zA-Z0-9_]</code>, transformed to uppercase) and placeholder character (en space):</p>
101
  <div className="form-field">
102
  <label htmlFor="custom">Custom:</label>
103
  <CustomInput name="custom" id="custom" onChange={this._onChange}/>
110
  }
111
  }
112
 
113
+ let CustomInput = (props) =>
114
  <MaskedInput
115
  mask="1111-WW-11"
116
  placeholder="1234-WW-12"
119
  {...props}
120
  formatCharacters={{
121
  'W': {
122
+ validate: (char) => /\w/.test(char),
123
+ transform: (char) => char.toUpperCase()
124
  }
125
  }}
126
  />
nwb.config.js CHANGED
@@ -14,15 +14,6 @@ module.exports = function(build) {
14
  if (/^build/.test(build.command)) {
15
  // Don't include default polyfills in the demo build
16
  config.polyfill = false
17
- // Prevent React 15.x triggering inclusion of the Node.js process shim in the
18
- // demo build.
19
- config.webpack = {
20
- extra: {
21
- node: {
22
- process: false
23
- }
24
- }
25
- }
26
  }
27
 
28
  return config
14
  if (/^build/.test(build.command)) {
15
  // Don't include default polyfills in the demo build
16
  config.polyfill = false
 
 
 
 
 
 
 
 
 
17
  }
18
 
19
  return config
package.json CHANGED
@@ -1,6 +1,6 @@
1
  {
2
  "name": "react-maskedinput",
3
- "version": "4.0.0",
4
  "description": "Masked <input/> React component",
5
  "main": "lib/index.js",
6
  "module": "es/index.js",
@@ -23,13 +23,13 @@
23
  "prop-types": "^15.5.7"
24
  },
25
  "peerDependencies": {
26
- "react": "^0.14.9 || ^15.3.0"
27
  },
28
  "devDependencies": {
29
  "eslint-config-jonnybuchanan": "5.0.x",
30
- "nwb": "0.17.x",
31
- "react": "15.x",
32
- "react-dom": "15.x"
33
  },
34
  "author": "Jonny Buchanan <jonathan.buchanan@gmail.com>",
35
  "homepage": "https://github.com/insin/react-maskedinput",
1
  {
2
  "name": "react-maskedinput",
3
+ "version": "4.0.1",
4
  "description": "Masked <input/> React component",
5
  "main": "lib/index.js",
6
  "module": "es/index.js",
23
  "prop-types": "^15.5.7"
24
  },
25
  "peerDependencies": {
26
+ "react": "^0.14.9 || ^15.3.0 || ^16.0.0"
27
  },
28
  "devDependencies": {
29
  "eslint-config-jonnybuchanan": "5.0.x",
30
+ "nwb": "0.21.x",
31
+ "react": "16.x",
32
+ "react-dom": "16.x"
33
  },
34
  "author": "Jonny Buchanan <jonathan.buchanan@gmail.com>",
35
  "homepage": "https://github.com/insin/react-maskedinput",
src/index.js CHANGED
@@ -2,8 +2,8 @@ import React from 'react'
2
  import PropTypes from 'prop-types'
3
  import InputMask from 'inputmask-core'
4
 
5
- var KEYCODE_Z = 90
6
- var KEYCODE_Y = 89
7
 
8
  function isUndo(e) {
9
  return (e.ctrlKey || e.metaKey) && e.keyCode === (e.shiftKey ? KEYCODE_Y : KEYCODE_Z)
@@ -14,17 +14,16 @@ function isRedo(e) {
14
  }
15
 
16
  function getSelection (el) {
17
- var start, end, rangeEl, clone
18
-
19
  if (el.selectionStart !== undefined) {
20
  start = el.selectionStart
21
  end = el.selectionEnd
22
  }
23
  else {
24
  try {
25
  el.focus()
26
- rangeEl = el.createTextRange()
27
- clone = rangeEl.duplicate()
28
 
29
  rangeEl.moveToBookmark(document.selection.createRange().getBookmark())
30
  clone.setEndPoint('EndToStart', rangeEl)
@@ -39,16 +38,14 @@ function getSelection (el) {
39
  }
40
 
41
  function setSelection(el, selection) {
42
- var rangeEl
43
-
44
  try {
45
  if (el.selectionStart !== undefined) {
46
  el.focus()
47
  el.setSelectionRange(selection.start, selection.end)
48
  }
49
  else {
50
  el.focus()
51
- rangeEl = el.createTextRange()
52
  rangeEl.collapse(true)
53
  rangeEl.moveStart('character', selection.start)
54
  rangeEl.moveEnd('character', selection.end - selection.start)
@@ -59,17 +56,19 @@ function setSelection(el, selection) {
59
  }
60
 
61
  class MaskedInput extends React.Component {
62
- constructor(props) {
63
- super(props)
 
 
 
 
64
 
65
- this._onChange = this._onChange.bind(this)
66
- this._onKeyDown = this._onKeyDown.bind(this)
67
- this._onPaste = this._onPaste.bind(this)
68
- this._onKeyPress = this._onKeyPress.bind(this)
69
  }
70
 
71
  componentWillMount() {
72
- var options = {
73
  pattern: this.props.mask,
74
  value: this.props.value,
75
  formatCharacters: this.props.formatCharacters
@@ -128,30 +127,24 @@ class MaskedInput extends React.Component {
128
  setSelection(this.input, this.mask.selection)
129
  }
130
 
131
- _onChange(e) {
132
  // console.log('onChange', JSON.stringify(getSelection(this.input)), e.target.value)
133
 
134
- var maskValue = this.mask.getValue()
135
- if (e.target.value !== maskValue) {
136
- // Cut or delete operations will have shortened the value
137
- if (e.target.value.length < maskValue.length) {
138
- var sizeDiff = maskValue.length - e.target.value.length
139
- this._updateMaskSelection()
140
- this.mask.selection.end = this.mask.selection.start + sizeDiff
141
- this.mask.backspace()
142
- }
143
- var value = this._getDisplayValue()
144
- e.target.value = value
145
- if (value) {
146
- this._updateInputSelection()
147
- }
148
  }
 
149
  if (this.props.onChange) {
150
  this.props.onChange(e)
151
  }
152
  }
153
 
154
- _onKeyDown(e) {
155
  // console.log('onKeyDown', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
156
 
157
  if (isUndo(e)) {
@@ -181,7 +174,7 @@ class MaskedInput extends React.Component {
181
  e.preventDefault()
182
  this._updateMaskSelection()
183
  if (this.mask.backspace()) {
184
- var value = this._getDisplayValue()
185
  e.target.value = value
186
  if (value) {
187
  this._updateInputSelection()
@@ -193,7 +186,7 @@ class MaskedInput extends React.Component {
193
  }
194
  }
195
 
196
- _onKeyPress(e) {
197
  // console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
198
 
199
  // Ignore modified key presses
@@ -211,7 +204,7 @@ class MaskedInput extends React.Component {
211
  }
212
  }
213
 
214
- _onPaste(e) {
215
  // console.log('onPaste', JSON.stringify(getSelection(this.input)), e.clipboardData.getData('Text'), e.target.value)
216
 
217
  e.preventDefault()
@@ -220,15 +213,15 @@ class MaskedInput extends React.Component {
220
  if (this.mask.paste(e.clipboardData.getData('Text'))) {
221
  e.target.value = this.mask.getValue()
222
  // Timeout needed for IE
223
- setTimeout(this._updateInputSelection, 0)
224
  if (this.props.onChange) {
225
  this.props.onChange(e)
226
  }
227
  }
228
  }
229
 
230
  _getDisplayValue() {
231
- var value = this.mask.getValue()
232
  return value === this.mask.emptyValue ? '' : value
233
  }
234
 
@@ -259,27 +252,16 @@ class MaskedInput extends React.Component {
259
  }
260
 
261
  render() {
262
- var ref = r => { this.input = r }
263
- var maxLength = this.mask.pattern.length
264
- var value = this._getDisplayValue()
265
- var eventHandlers = this._getEventHandlers()
266
- var { size = maxLength, placeholder = this.mask.emptyValue } = this.props
267
-
268
- var { placeholderChar, formatCharacters, ...cleanedProps } = this.props // eslint-disable-line
269
- var inputProps = { ...cleanedProps, ...eventHandlers, ref, maxLength, value, size, placeholder }
270
  return <input {...inputProps} />
271
  }
272
  }
273
 
274
- MaskedInput.propTypes = {
275
- mask: PropTypes.string.isRequired,
276
-
277
- formatCharacters: PropTypes.object,
278
- placeholderChar: PropTypes.string
279
- }
280
-
281
- MaskedInput.defaultProps = {
282
- value: ''
283
- }
284
-
285
  export default MaskedInput
2
  import PropTypes from 'prop-types'
3
  import InputMask from 'inputmask-core'
4
 
5
+ let KEYCODE_Z = 90
6
+ let KEYCODE_Y = 89
7
 
8
  function isUndo(e) {
9
  return (e.ctrlKey || e.metaKey) && e.keyCode === (e.shiftKey ? KEYCODE_Y : KEYCODE_Z)
14
  }
15
 
16
  function getSelection (el) {
17
+ let start, end
 
18
  if (el.selectionStart !== undefined) {
19
  start = el.selectionStart
20
  end = el.selectionEnd
21
  }
22
  else {
23
  try {
24
  el.focus()
25
+ let rangeEl = el.createTextRange()
26
+ let clone = rangeEl.duplicate()
27
 
28
  rangeEl.moveToBookmark(document.selection.createRange().getBookmark())
29
  clone.setEndPoint('EndToStart', rangeEl)
38
  }
39
 
40
  function setSelection(el, selection) {
 
 
41
  try {
42
  if (el.selectionStart !== undefined) {
43
  el.focus()
44
  el.setSelectionRange(selection.start, selection.end)
45
  }
46
  else {
47
  el.focus()
48
+ let rangeEl = el.createTextRange()
49
  rangeEl.collapse(true)
50
  rangeEl.moveStart('character', selection.start)
51
  rangeEl.moveEnd('character', selection.end - selection.start)
56
  }
57
 
58
  class MaskedInput extends React.Component {
59
+ static propTypes = {
60
+ mask: PropTypes.string.isRequired,
61
+
62
+ formatCharacters: PropTypes.object,
63
+ placeholderChar: PropTypes.string
64
+ }
65
 
66
+ static defaultProps = {
67
+ value: ''
 
 
68
  }
69
 
70
  componentWillMount() {
71
+ let options = {
72
  pattern: this.props.mask,
73
  value: this.props.value,
74
  formatCharacters: this.props.formatCharacters
127
  setSelection(this.input, this.mask.selection)
128
  }
129
 
130
+ _onChange = (e) => {
131
  // console.log('onChange', JSON.stringify(getSelection(this.input)), e.target.value)
132
 
133
+ let maskValue = this.mask.getValue()
134
+ let incomingValue = e.target.value
135
+ if (incomingValue !== maskValue) { // only modify mask if form contents actually changed
136
+ this._updateMaskSelection()
137
+ this.mask.setValue(incomingValue) // write the whole updated value into the mask
138
+ e.target.value = this._getDisplayValue() // update the form with pattern applied to the value
139
+ this._updateInputSelection()
 
 
 
 
 
 
 
140
  }
141
+
142
  if (this.props.onChange) {
143
  this.props.onChange(e)
144
  }
145
  }
146
 
147
+ _onKeyDown = (e) => {
148
  // console.log('onKeyDown', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
149
 
150
  if (isUndo(e)) {
174
  e.preventDefault()
175
  this._updateMaskSelection()
176
  if (this.mask.backspace()) {
177
+ let value = this._getDisplayValue()
178
  e.target.value = value
179
  if (value) {
180
  this._updateInputSelection()
186
  }
187
  }
188
 
189
+ _onKeyPress = (e) => {
190
  // console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
191
 
192
  // Ignore modified key presses
204
  }
205
  }
206
 
207
+ _onPaste = (e) => {
208
  // console.log('onPaste', JSON.stringify(getSelection(this.input)), e.clipboardData.getData('Text'), e.target.value)
209
 
210
  e.preventDefault()
213
  if (this.mask.paste(e.clipboardData.getData('Text'))) {
214
  e.target.value = this.mask.getValue()
215
  // Timeout needed for IE
216
+ setTimeout(() => this._updateInputSelection(), 0)
217
  if (this.props.onChange) {
218
  this.props.onChange(e)
219
  }
220
  }
221
  }
222
 
223
  _getDisplayValue() {
224
+ let value = this.mask.getValue()
225
  return value === this.mask.emptyValue ? '' : value
226
  }
227
 
252
  }
253
 
254
  render() {
255
+ let ref = r => { this.input = r }
256
+ let maxLength = this.mask.pattern.length
257
+ let value = this._getDisplayValue()
258
+ let eventHandlers = this._getEventHandlers()
259
+ let { size = maxLength, placeholder = this.mask.emptyValue } = this.props
260
+
261
+ let { placeholderChar, formatCharacters, ...cleanedProps } = this.props // eslint-disable-line no-unused-vars
262
+ let inputProps = { ...cleanedProps, ...eventHandlers, ref, maxLength, value, size, placeholder }
263
  return <input {...inputProps} />
264
  }
265
  }
266
 
 
 
 
 
 
 
 
 
 
 
 
267
  export default MaskedInput

Readme

MaskedInput

A React component for <input> masking, built on top of inputmask-core.

Live Demo

Install

npm

npm install react-maskedinput --save

Browser bundle

The browser bundle exposes a global MaskedInput variable and expects to find a global React variable to work with.

Usage

Give MaskedInput a mask and an onChange callback:

import React from 'react'
import MaskedInput from 'react-maskedinput'

class CreditCardDetails extends React.Component {
  state = {
    card: '',
    expiry: '',
    ccv: ''
  }

  _onChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  render() {
    return <div className="CreditCardDetails">
      <label>
        Card Number:{' '}
        <MaskedInput mask="1111 1111 1111 1111" name="card" size="20" onChange={this._onChange}/>
      </label>
      <label>
        Expiry Date:{' '}
        <MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
      </label>
      <label>
        CCV:{' '}
        <MaskedInput mask="111" name="ccv" onChange={this._onChange}/>
      </label>
    </div>
  }
}

Create some wrapper components if you have a masking configuration which will be reused:

function CustomInput(props) {
  return <MaskedInput
    mask="1111-WW-11"
    placeholder="1234-WW-12"
    size="11"
    {...props}
    formatCharacters={{
      'W': {
        validate(char) { return /\w/.test(char ) },
        transform(char) { return char.toUpperCase() }
      }
    }}
  />
}

Props

mask : string

The masking pattern to be applied to the <input>.

See the inputmask-core docs for supported formatting characters.

onChange : (event: SyntheticEvent) => any

A callback which will be called any time the mask's value changes.

This will be passed a SyntheticEvent with the input accessible via event.target as usual.

Note: this component currently calls onChange directly, it does not generate an onChange event which will bubble up like a regular <input> component, so you must pass an onChange if you want to get a value back out.

formatCharacters: Object

Customised format character definitions for use in the pattern.

See the inputmask-core docs for details of the structure of this object.

placeholderChar: string

Customised placeholder character used to fill in editable parts of the pattern.

See the inputmask-core docs for details.

value : string

A default value for the mask.

placeholder : string

A default placeholder will be generated from the mask's pattern, but you can pass a placeholder prop to provide your own.

size : number | string

By default, the rendered <input>'s size will be the length of the pattern, but you can pass a size prop to override this.

Other props

Any other props passed in will be passed as props to the rendered <input>, except for the following, which are managed by the component:

  • maxLength - will always be equal to the pattern's .length
  • onKeyDown, onKeyPress & onPaste - will each trigger a call to onChange when necessary

MIT Licensed