Allow passing ref via custom props (Hacker0x01#1166)

Squar89 · Dec 11, 2017 · 224d478 · 224d478
1 parent f33c25b
commit 224d478
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -12,6 +12,7 @@ General datepicker component.
 |`children`|`node`|||
 |`className`|`string`|||
 |`customInput`|`element`|||
+|`customInputRef`|`string`|`'ref'`|The property used to pass the ref callback|
 |`dateFormat`|`union(string\|array)`|`'L'`||
 |`dateFormatCalendar`|`string`|`'MMMM YYYY'`||
 |`dayClassName`|`func`|||

diff --git a/src/index.jsx b/src/index.jsx
@@ -51,6 +51,7 @@ export default class DatePicker extends React.Component {
     children: PropTypes.node,
     className: PropTypes.string,
     customInput: PropTypes.element,
+    customInputRef: PropTypes.string,
     dateFormat: PropTypes.oneOfType([ // eslint-disable-line react/no-unused-prop-types
       PropTypes.string,
       PropTypes.array
@@ -461,13 +462,14 @@ export default class DatePicker extends React.Component {
     })
 
     const customInput = this.props.customInput || <input type="text" />
+    const customInputRef = this.props.customInputRef || 'ref'
     const inputValue =
       typeof this.props.value === 'string' ? this.props.value
         : typeof this.state.inputValue === 'string' ? this.state.inputValue
           : safeDateFormat(this.props.selected, this.props)
 
     return React.cloneElement(customInput, {
-      ref: (input) => { this.input = input },
+      [customInputRef]: (input) => { this.input = input },
       value: inputValue,
       onBlur: this.handleBlur,
       onChange: this.handleChange,