added HOC and decorators

build/test.js

@@ -3,21 +3,21 @@ var ReactDOM = require('react-dom');
 var Formsy = require('./../src/main.js');
 
 var Input = React.createClass({
-
-  mixins: [Formsy.Mixin],
   onChange: function (event) {
-    this.setValue(event.currentTarget.value);
+    this.props.setValue(event.currentTarget.value);
   },
   render: function () {
     return (
       <div>
-      {this.showRequired() ? 'required' : ''}
-      <input disabled={this.isFormDisabled()} value={this.getValue()} onChange={this.onChange}/>
+      {this.props.showRequired() ? 'required' : ''}
+      <input disabled={this.props.isFormDisabled()} value={this.props.getValue()} onChange={this.onChange}/>
       </div>
     );
   }
 });
 
+Input = Formsy.HOC(Input);
+
 var SomeComp = React.createClass({
   getInitialState: function () {
     return  {

src/Decorator.js

@@ -0,0 +1,28 @@
+var React = global.React || require('react');
+var Mixin = require('./Mixin.js');
+module.exports = function () {
+  return function (Component) {
+    return React.createClass({
+      mixins: [Mixin],
+      render: function () {
+        return React.createElement(Component, {
+          setValidations: this.setValidations,
+          setValue: this.setValue,
+          resetValue: this.resetValue,
+          getValue: this.getValue,
+          hasValue: this.hasValue,
+          getErrorMessage: this.getErrorMessage,
+          getErrorMessages: this.getErrorMessages,
+          isFormDisabled: this.isFormDisabled,
+          isValid: this.isValid,
+          isPristine: this.isPristine,
+          isFormSubmitted: this.isFormSubmitted,
+          isRequired: this.isRequired,
+          showRequired: this.showRequired,
+          showError: this.showError,
+          isValidValue: this.isValidValue
+        });
+      }
+    });
+  };
+};

src/HOC.js

@@ -0,0 +1,26 @@
+var React = global.React || require('react');
+var Mixin = require('./Mixin.js');
+module.exports = function (Component) {
+  return React.createClass({
+    mixins: [Mixin],
+    render: function () {
+      return React.createElement(Component, {
+        setValidations: this.setValidations,
+        setValue: this.setValue,
+        resetValue: this.resetValue,
+        getValue: this.getValue,
+        hasValue: this.hasValue,
+        getErrorMessage: this.getErrorMessage,
+        getErrorMessages: this.getErrorMessages,
+        isFormDisabled: this.isFormDisabled,
+        isValid: this.isValid,
+        isPristine: this.isPristine,
+        isFormSubmitted: this.isFormSubmitted,
+        isRequired: this.isRequired,
+        showRequired: this.showRequired,
+        showError: this.showError,
+        isValidValue: this.isValidValue
+      });
+    }
+  });
+};

src/main.js

@@ -4,9 +4,13 @@ var validationRules = require('./validationRules.js');
 var formDataToObject = require('form-data-to-object');
 var utils = require('./utils.js');
 var Mixin = require('./Mixin.js');
+var HOC = require('./HOC.js');
+var Decorator = require('./Decorator.js');
 var options = {};
 
 Formsy.Mixin = Mixin;
+Formsy.HOC = HOC;
+Formsy.Decorator = Decorator;
 
 Formsy.defaults = function (passedOptions) {
   options = passedOptions;