Invoke onKeyDown, onBeforeInput and onPaste handlers from props

README.md

@@ -124,11 +124,14 @@ A default `placeholder` will be generated from the mask's pattern, but you can p
 
 By default, the rendered `<input>`'s `size` will be the length of the pattern, but you can pass a `size` prop to override this.
 
+### `onKeyDown | onBeforeInput | onPaste` : `(event: SyntheticEvent) => any`
+
+These props will be invoked as usual, however, they are also handled internally and will invoke `onChange` when necessary.
+
 ### 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

demo/src/index.js

@@ -54,7 +54,7 @@ const App = React.createClass({
       <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 mask="1111 1111 1111 1111" name="card" id="card" size="20" value={this.state.card} onChange={this._onChange}/>
+        <MaskedInput mask="1111 1111 1111 1111" name="card" id="card" size="20" value={this.state.card} onChange={this._onChange} onKeyDown={function(e) { console.log('onKeyDown triggered') }} onBeforeInput={function(e) { console.log('onBeforeInput triggered') }} onPaste={function(e) { console.log('onPaste triggered') }}/>
       </div>
       <p>You can even externally update the card state like a standard input element:</p>
       <div className="form-field">

src/index.js

@@ -19,7 +19,10 @@ var MaskedInput = React.createClass({
     mask: React.PropTypes.string.isRequired,
 
     formatCharacters: React.PropTypes.object,
-    placeholderChar: React.PropTypes.string
+    placeholderChar: React.PropTypes.string,
+    onKeyDown: React.PropTypes.func,
+    onBeforeInput: React.PropTypes.func,
+    onPaste: React.PropTypes.func
   },
 
   getDefaultProps() {
@@ -151,10 +154,17 @@ var MaskedInput = React.createClass({
         }
       }
     }
+
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e)
+    }
   },
 
-  _onKeyPress(e) {
-    // console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
+  _onBeforeInput(e) {
+    // console.log('onBeforeInput', JSON.stringify(getSelection(this.input)), e.key, e.target.value)
+    if (this.props.onBeforeInput) {
+      this.props.onBeforeInput(e)
+    }
 
     // Ignore modified key presses
     // Ignore enter key to allow form submission
@@ -185,6 +195,10 @@ var MaskedInput = React.createClass({
         this.props.onChange(e)
       }
     }
+
+    if (this.props.onPaste) {
+      this.props.onPaste(e)
+    }
   },
 
   _getDisplayValue() {
@@ -208,7 +222,7 @@ var MaskedInput = React.createClass({
       maxLength={patternLength}
       onChange={this._onChange}
       onKeyDown={this._onKeyDown}
-      onBeforeInput={this._onKeyPress}
+      onBeforeInput={this._onBeforeInput}
       onPaste={this._onPaste}
       placeholder={placeholder || this.mask.emptyValue}
       size={size || patternLength}