Allow user to define a ref function on the internal input

sanniassin · Feb 8, 2018 · 52dee0d · 52dee0d
1 parent fe93c48
commit 52dee0d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -59,5 +59,14 @@ class PhoneInput extends React.Component {
 }
 ```
 
+### `userRef` : `function`
+
+Attaches a `ref` handler to the `<input>` tag. In case you need to save a reference to manage focus, etc.
+
+## Example
+```jsx
+<InputMask userRef={ref => (this.input = ref)} />
+```
+
 ## Thanks
 Thanks to [BrowserStack](https://www.browserstack.com/) for the help with testing on real devices
diff --git a/src/index.js b/src/index.js
@@ -514,7 +514,15 @@ class InputElement extends React.Component {
   }
 
   render() {
-    var { mask, alwaysShowMask, maskChar, formatChars, ...props } = this.props;
+    var { mask, alwaysShowMask, maskChar, formatChars, userRef, ...props } = this.props;
+
+    var assignRef = ref => {
+      if (typeof userRef === 'function') {
+        userRef(ref);
+      }
+
+      this.input = ref;
+    }
 
     if (this.maskOptions.mask) {
       if (!props.disabled && !props.readOnly) {
@@ -529,7 +537,7 @@ class InputElement extends React.Component {
       }
     }
 
-    return <input ref={ref => this.input = ref} {...props} onFocus={this.onFocus} onBlur={this.onBlur} />;
+    return <input ref={assignRef} {...props} onFocus={this.onFocus} onBlur={this.onBlur} />;
   }
 }