feat: expose inner element when using HOC (#399)

Use `innerRef={(c) => { this.myInput = c; }}` on your HOC to access the internal element

API.md

@@ -37,6 +37,7 @@
   - [validate](#validate)
   - [formNoValidate](#formnovalidate)
 - [Formsy.HOC](#formsyhoc)
+  - [innerRef](#innerRef)
 - [Formsy.Decorator](#formsydecorator)
 - [Formsy.addValidationRule](#formsyaddvalidationrule)
 - [Validators](#validators)
@@ -566,7 +567,7 @@ The same methods as the mixin are exposed to the HOC version of the element comp
 ```jsx
 import {HOC} from 'formsy-react';
 
-class MyInput extends React.Component {
+class MyInputHoc extends React.Component {
   render() {
     return (
       <div>
@@ -575,9 +576,30 @@ class MyInput extends React.Component {
     );
   }
 };
-export default HOC(MyInput);
+export default HOC(MyInputHoc);
 ```
 
+#### <a name="innerRef">innerRef</a>
+
+Use an `innerRef` prop to get a reference to your DOM node.
+
+```jsx
+var MyForm = React.createClass({
+  componentDidMount() {
+    this.searchInput.focus()
+  },
+  render: function () {
+    return (
+      <Formsy.Form>
+        <MyInputHoc name="search" innerRef={(c) => { this.searchInput = c; }} />
+      </Formsy.Form>
+    );
+  }
+})
+```
+
+Sets a class name on the form itself.
+
 ### <a name="formsydecorator">Formsy.Decorator</a>
 The same methods as the mixin are exposed to the decorator version of the element component, though through the `props`, not on the instance.
 ```jsx

src/HOC.js

@@ -4,8 +4,10 @@ module.exports = function (Component) {
   return React.createClass({
     displayName: 'Formsy(' + getDisplayName(Component) + ')',
     mixins: [Mixin],
+
     render: function () {
-      return React.createElement(Component, {
+      const { innerRef } = this.props;
+      const propsForElement = {
         setValidations: this.setValidations,
         setValue: this.setValue,
         resetValue: this.resetValue,
@@ -22,7 +24,12 @@ module.exports = function (Component) {
         showError: this.showError,
         isValidValue: this.isValidValue,
         ...this.props
-      });
+      };
+
+      if (innerRef) {
+        propsForElement.ref = innerRef;
+      }
+      return React.createElement(Component, propsForElement);
     }
   });
 };

tests/Formsy-spec.js

@@ -4,12 +4,30 @@ import TestUtils from 'react-addons-test-utils';
 
 import Formsy from './..';
 import TestInput from './utils/TestInput';
+import TestInputHoc from './utils/TestInputHoc';
 import immediate from './utils/immediate';
 import sinon from 'sinon';
 
 export default {
 
   'Setting up a form': {
+    'should expose the users DOM node through an innerRef prop': function (test) {
+      const TestForm = React.createClass({
+        render() {
+          return (
+            <Formsy.Form>
+              <TestInputHoc name="name" innerRef={(c) => { this.name = c; }} />
+            </Formsy.Form>
+          );
+        }
+      });
+
+      const form = TestUtils.renderIntoDocument(<TestForm/>);
+      const input = form.name;
+      test.equal(input.methodOnWrappedInstance('foo'), 'foo');
+
+      test.done();
+    },
 
     'should render a form into the document': function (test) {
 

tests/utils/TestInputHoc.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HOC as formsyHoc } from './../..';
+
+const defaultProps = {
+  methodOnWrappedInstance(param) {
+    return param;
+  },
+  render() {
+    return (<input />);
+  },
+};
+
+export default formsyHoc(React.createClass(defaultProps));