Use this.props.mask instead of this.props.pattern to avoid preventing use of the HTML 5 pattern attribute

Fixes insin#15

Author: insin

CHANGES.md

@@ -1,3 +1,5 @@
+**Breaking change:** Now uses a `mask` prop to define the input mask instead of `pattern`, to avoid preventing use of the the HTML5 `pattern` attribute in conjunction with the input mask.
+
 **Breaking change:** React >= 0.14 is now required.
 
 React 0.14 compatibility. [[jquense][jquense]]

README.md

@@ -1,32 +1,28 @@
 # `MaskedInput`
 
-A [React](http://facebook.github.io/react/) component for `<input>` masking,
-built on top of [inputmask-core](https://github.com/insin/inputmask-core).
+A [React](http://facebook.github.io/react/) component for `<input>` masking, built on top of [inputmask-core](https://github.com/insin/inputmask-core).
 
 ## [Live Demo](http://insin.github.io/react-maskedinput/)
 
 ## Install
 
 ### npm
 
-`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/).
+`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/).
 
 ```
 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.
+The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` (>= 0.14.0) variable to work with.
 
 You can find it in the [/dist directory](https://github.com/insin/react-maskedinput/tree/master/dist).
 
 ## Usage
 
-Give `MaskedInput` a [`pattern`](#pattern-string) and an `onChange` callback:
+Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback:
 
 ```javascript
 var React = require('react')
@@ -49,29 +45,28 @@ var CreditCardDetails = React.createClass({
     return <div className="CreditCardDetails">
       <label>
         Card Number:{' '}
-        <MaskedInput pattern="1111 1111 1111 1111" name="card" size="20" onChange={this._onChange}/>
+        <MaskedInput mask="1111 1111 1111 1111" name="card" size="20" onChange={this._onChange}/>
       </label>
       <label>
         Expiry Date:{' '}
-        <MaskedInput pattern="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
+        <MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
       </label>
       <label>
         CCV:{' '}
-        <MaskedInput pattern="111" name="ccv" onChange={this._onChange}/>
+        <MaskedInput mask="111" name="ccv" onChange={this._onChange}/>
       </label>
     </div>
   }
 })
 ```
 
-Create some wrapper components if you have a masking configuration which will be
-reused:
+Create some wrapper components if you have a masking configuration which will be reused:
 
 ```javascript
 var CustomInput = React.createClass({
   render() {
     return <MaskedInput
-      pattern="1111-WW-11"
+      mask="1111-WW-11"
       placeholder="1234-WW-12"
       size="11"
       {...this.props}
@@ -88,30 +83,25 @@ var CustomInput = React.createClass({
 
 ## Props
 
-### `pattern` : `string`
+### `mask` : `string`
 
 The masking pattern to be applied to the `<input>`.
 
-See the [inputmask-core docs](https://github.com/insin/inputmask-core#pattern)
-for supported formatting characters.
+See the [inputmask-core docs](https://github.com/insin/inputmask-core#pattern) 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.
+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.
+**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](https://github.com/insin/inputmask-core#formatcharacters)
-for details of the structure of this object.
+See the [inputmask-core docs](https://github.com/insin/inputmask-core#formatcharacters) for details of the structure of this object.
 
 ### `placeholderChar`: `string`
 
@@ -125,21 +115,17 @@ 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.
+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.
+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:
+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
+* `onKeyDown`, `onKeyPress` & `onPaste` - will each trigger a call to `onChange` when necessary
 
 ## MIT Licensed

demo/index.html

@@ -52,7 +52,7 @@
 </head>
 <body>
 <div id="app"></div>
-<script type="text/jsx;harmony=true">void function() { 'use strict';
+<script type="text/jsx;harmony=true">void function() { 'use strict'
 
 var PATTERNS = [
   '1111 1111',
@@ -92,35 +92,35 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
       <p className="lead">A React component which creates a masked <code>&lt;input/&gt;</code></p>
       <div className="form-field">
         <label htmlFor="card">Card Number:</label>
-        <MaskedInput pattern="1111 1111 1111 1111" name="card" id="card" size="20" onChange={this._onChange}/>
+        <MaskedInput mask="1111 1111 1111 1111" name="card" id="card" size="20" onChange={this._onChange}/>
       </div>
       <p>Placeholders are automatically generated but can be overridden with your own:</p>
       <div className="form-field">
         <label htmlFor="expiry">Expiry Date:</label>
-        <MaskedInput pattern="11/1111" name="expiry" id="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
+        <MaskedInput mask="11/1111" name="expiry" id="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
       </div>
       <div className="form-field">
         <label htmlFor="ccv">CCV:</label>
-        <MaskedInput pattern="111" name="ccv" id="ccv" onChange={this._onChange}/>
+        <MaskedInput mask="111" name="ccv" id="ccv" onChange={this._onChange}/>
       </div>
       <div className="form-field">
         <label htmlFor="plate">License Plate:</label>
-        <MaskedInput pattern="AAA 1111" name="plate" id="plate" onChange={this._onChange} placeholder="ABC 1234"/>
+        <MaskedInput mask="AAA 1111" name="plate" id="plate" onChange={this._onChange} placeholder="ABC 1234"/>
       </div>
       <p>Mask placeholder characters can be escaped with a leading <code>\</code> to use them as static contents:</p>
       <div className="form-field">
         <label htmlFor="escaped">Escaped:</label>
-        <MaskedInput pattern="11 \* 11" name="escaped" id="escaped" onChange={this._onChange}/>
+        <MaskedInput mask="11 \* 11" name="escaped" id="escaped" onChange={this._onChange}/>
       </div>
       <p>Leading static characters:</p>
       <div className="form-field">
         <label htmlFor="leading">Leading:</label>
-        <MaskedInput pattern="(0) 111 1111" name="leading" id="leading" onChange={this._onChange}/>
+        <MaskedInput mask="(0) 111 1111" name="leading" id="leading" onChange={this._onChange}/>
       </div>
       <p>Changing patterns:</p>
       <div className="form-field">
         <label htmlFor="changing">Input:</label>
-        <MaskedInput pattern={this.state.pattern} name="changing" id="changing" onChange={this._onChange}/>
+        <MaskedInput mask={this.state.pattern} name="changing" id="changing" onChange={this._onChange}/>
       </div>
       <div className="form-field">
         <label htmlFor="pattern">Pattern:</label>
@@ -144,7 +144,7 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
 var CustomInput = React.createClass({
   render() {
     return <MaskedInput
-      pattern="1111-WW-11"
+      mask="1111-WW-11"
       placeholder="1234-WW-12"
       placeholderChar=" "
       size="11"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-maskedinput",
   "description": "Masked <input/> React component",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "main": "./lib/index.js",
   "standalone": "MaskedInput",
   "homepage": "https://github.com/insin/react-maskedinput",

src/index.jsx

@@ -18,7 +18,7 @@ function isRedo(e) {
 
 var MaskedInput = React.createClass({
   propTypes: {
-    pattern: React.PropTypes.string.isRequired,
+    mask: React.PropTypes.string.isRequired,
 
     formatCharacters: React.PropTypes.object,
     placeholderChar: React.PropTypes.string
@@ -32,7 +32,7 @@ var MaskedInput = React.createClass({
 
   componentWillMount() {
     var options = {
-      pattern: this.props.pattern,
+      pattern: this.props.mask,
       value: this.props.value,
       formatCharacters: this.props.formatCharacters
     }
@@ -43,8 +43,8 @@ var MaskedInput = React.createClass({
   },
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.pattern !== nextProps.pattern) {
-      this.mask.setPattern(nextProps.pattern, {value: this.mask.getRawValue()})
+    if (this.props.mask !== nextProps.mask) {
+      this.mask.setPattern(nextProps.mask, {value: this.mask.getRawValue()})
     }
   },
 
@@ -150,7 +150,7 @@ var MaskedInput = React.createClass({
   },
 
   render() {
-    var {pattern, formatCharacters, size, placeholder, ...props} = this.props
+    var {mask, formatCharacters, size, placeholder, ...props} = this.props
     var patternLength = this.mask.pattern.length
     return <input {...props}
       ref={r => this.input = r }