Merge pull request #41 from buildo/40-add_prop_innerref_to

#40: Add prop `innerRef` to access textarea DOM node (closes #40)

3 files changed, 22 insertions, 11 deletions

diff --git a/README.md b/README.md
index fbe1baa..4d8dd53 100644
--- a/README.md
+++ b/README.md
@@ -76,9 +76,7 @@ In addition to `maxHeight`, you can force `TextareaAutosize` to have a maximum n
 #### Refs to DOM nodes
 In order to manually call `textarea`'s DOM element functions like `focus()` or `blur()`, you need a ref to the DOM node.
 
-You get one by using the prop `ref` and `ReactDOM.findDOMNode` as shown in the example below.
-
-NOTE: As `TextareaAutosize` is not a native React component (`input`, `div`, `textarea` ...), `ref` will return you the instance of the class. You have to use `ReactDOM.findDOMNode` to get a pointer to the DOM element.
+You get one by using the prop `innerRef` as shown in the example below:
 
 ```jsx
 class Form extends React.Component {
@@ -88,9 +86,7 @@ class Form extends React.Component {
 
   render() {
     return (
-      <TextareaAutosize
-        ref={(ref) => { this.textarea = ReactDOM.findDOMNode(ref); }}
-      />
+      <TextareaAutosize innerRef={ref => this.textarea = ref} />
     );
   }
 }
diff --git a/src/README.md b/src/README.md
index a963a92..85affb9 100644
--- a/src/README.md
+++ b/src/README.md
@@ -8,3 +8,4 @@ A light replacement for built-in `<textarea />` component which automatically ad
 | **onResize** | <code>Function</code> |  | *optional*. Called whenever the textarea resizes |
 | **rows** | <code>Number</code> |  | *optional*. Minimum number of visible rows |
 | **maxRows** | <code>Number</code> |  | *optional*. Maximum number of visible rows |
+| **innerRef** | <code>Function</code> |  | *optional*. Called with the ref to the DOM node |
diff --git a/src/TextareaAutosize.js b/src/TextareaAutosize.js
index 1cd2377..04a3251 100644
--- a/src/TextareaAutosize.js
+++ b/src/TextareaAutosize.js
@@ -12,6 +12,7 @@ const UPDATE = 'autosize:update',
  * @param onResize - called whenever the textarea resizes
  * @param rows - minimum number of visible rows
  * @param maxRows - maximum number of visible rows
+ * @param innerRef - called with the ref to the DOM node
  */
 export default class TextareaAutosize extends React.Component {
 
@@ -105,23 +106,35 @@ export default class TextareaAutosize extends React.Component {
     this.props.onChange && this.props.onChange(e);
   }
 
+  saveDOMNodeRef = ref => {
+    const { innerRef } = this.props;
+
+    if (innerRef) {
+      innerRef(ref);
+    }
+
+    this.textarea = ref;
+  }
+
   getLocals = () => {
     const {
-      props: { onResize, maxRows, onChange, style, ...props }, // eslint-disable-line no-unused-vars
-      state: { maxHeight }
+      props: { onResize, maxRows, onChange, style, innerRef, ...props }, // eslint-disable-line no-unused-vars
+      state: { maxHeight },
+      saveDOMNodeRef
     } = this;
 
     return {
       ...props,
+      saveDOMNodeRef,
       style: maxHeight ? { ...style, maxHeight } : style,
       onChange: this.onChange
     };
   }
 
   render() {
-    const { children, ...locals } = this.getLocals();
+    const { children, saveDOMNodeRef, ...locals } = this.getLocals();
     return (
-      <textarea {...locals} ref={(ref) => { this.textarea = ref; }}>
+      <textarea {...locals} ref={saveDOMNodeRef}>
         {children}
       </textarea>
     );
@@ -138,5 +151,6 @@ export default class TextareaAutosize extends React.Component {
 TextareaAutosize.propTypes = {
   rows: PropTypes.number,
   maxRows: PropTypes.number,
-  onResize: PropTypes.func
+  onResize: PropTypes.func,
+  innerRef: PropTypes.func
 };