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}