diff --git a/build/test.js b/build/test.js
index d39fe80..39c8722 100644
--- a/build/test.js
+++ b/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 (
- {this.showRequired() ? 'required' : ''}
-
+ {this.props.showRequired() ? 'required' : ''}
+
);
}
});
+Input = Formsy.HOC(Input);
+
var SomeComp = React.createClass({
getInitialState: function () {
return {
diff --git a/src/Decorator.js b/src/Decorator.js
new file mode 100644
index 0000000..e4c61cc
--- /dev/null
+++ b/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
+ });
+ }
+ });
+ };
+};
diff --git a/src/HOC.js b/src/HOC.js
new file mode 100644
index 0000000..acbffa9
--- /dev/null
+++ b/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
+ });
+ }
+ });
+};
diff --git a/src/main.js b/src/main.js
index b37165d..4218979 100644
--- a/src/main.js
+++ b/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;