christianalfoni · leemeichin · Apr 12, 2017 · Apr 12, 2017 · Apr 12, 2017 · Apr 12, 2017
diff --git a/API.md b/API.md
@@ -52,7 +52,7 @@ Sets a class name on the form itself.
 
 #### <a name="mapping">mapping</a>
 ```jsx
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   mapInputs: function (inputs) {
     return {
       'field1': inputs.foo,
@@ -78,7 +78,7 @@ Use mapping to change the data structure of your input elements. This structure
 You can manually pass down errors to your form. In combination with `onChange` you are able to validate using an external validator.
 
 ```jsx
-var Form = React.createClass({
+var Form = createReactClass({
   getInitialState: function () {
     return {
       validationErrors: {}
@@ -147,7 +147,7 @@ Triggers when form is submitted with an invalid state. The arguments are the sam
 
 #### <a name="resetform">reset(values)</a>
 ```jsx
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   resetForm: function () {
     this.refs.form.reset();
   },
@@ -164,7 +164,7 @@ Manually reset the form to its pristine state. You can also pass an object that
 
 #### <a name="getmodel">getModel()</a>
 ```jsx
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   getMyData: function () {
     alert(this.refs.form.getModel());
   },
@@ -181,7 +181,7 @@ Manually get values from all registered components. Keys are name of input and v
 
 #### <a name="updateInputsWithError">updateInputsWithError(errors)</a>
 ```jsx
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   someFunction: function () {
     this.refs.form.updateInputsWithError({
       email: 'This email is taken',
@@ -201,7 +201,7 @@ Manually invalidate the form by taking an object that maps to inputs. This is us
 
 #### <a name="preventExternalInvalidation">preventExternalInvalidation</a>
 ```jsx
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   onSubmit: function (model, reset, invalidate) {
     invalidate({
       foo: 'Got some error'
@@ -293,7 +293,7 @@ Would be typical for a checkbox type of form element that must be checked, e.g.
 
 #### <a name="getvalue">getValue()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   render: function () {
     return (
@@ -306,7 +306,7 @@ Gets the current value of the form input component.
 
 #### <a name="setvalue">setValue(value)</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -322,7 +322,7 @@ Sets the value of your form input component. Notice that it does not have to be
 
 #### <a name="resetvalue">resetValue()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -341,7 +341,7 @@ Resets to empty value. This will run a **setState()** on the component and do a
 
 #### <a name="geterrormessage">getErrorMessage()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -363,7 +363,7 @@ Will return the validation messages set if the form input component is invalid.
 
 #### <a name="isvalid">isValid()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -386,7 +386,7 @@ Returns the valid state of the form input component.
 You can pre-verify a value against the passed validators to the form element.
 
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     if (this.isValidValue(event.target.value)) {
@@ -398,7 +398,7 @@ var MyInput = React.createClass({
   }
 });
 
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   render: function () {
     return (
       <Formsy.Form>
@@ -411,7 +411,7 @@ var MyForm = React.createClass({
 
 #### <a name="isrequired">isRequired()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -431,7 +431,7 @@ Returns true if the required property has been passed.
 
 #### <a name="showrequired">showRequired()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -451,7 +451,7 @@ Lets you check if the form input component should indicate if it is a required f
 
 #### <a name="showerror">showError()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -471,7 +471,7 @@ Lets you check if the form input component should indicate if there is an error.
 
 #### <a name="ispristine">isPristine()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.currentTarget.value);
@@ -492,7 +492,7 @@ By default all formsy input elements are pristine, which means they are not "tou
 
 #### <a name="isformdisabled">isFormDisabled()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   render: function () {
     return (
@@ -509,7 +509,7 @@ You can now disable the form itself with a prop and use **isFormDisabled()** ins
 
 #### <a name="isformsubmitted">isFormSubmitted()</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   render: function () {
     var error = this.isFormSubmitted() ? this.getErrorMessage() : null;
@@ -526,7 +526,7 @@ You can check if the form has been submitted.
 
 #### <a name="validate">validate</a>
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   changeValue: function (event) {
     this.setValue(event.target.value);
@@ -550,7 +550,7 @@ You can create custom validation inside a form element. The validate method defi
 #### <a name="formnovalidate">formNoValidate</a>
 To avoid native validation behavior on inputs, use the React `formNoValidate` property.
 ```jsx
-var MyInput = React.createClass({
+var MyInput = createReactClass({
   mixins: [Formsy.Mixin],
   render: function () {
     return (
@@ -584,7 +584,7 @@ export default HOC(MyInputHoc);
 Use an `innerRef` prop to get a reference to your DOM node.
 
 ```jsx
-var MyForm = React.createClass({
+var MyForm = createReactClass({
   componentDidMount() {
     this.searchInput.focus()
   },

diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ Complete API reference is available [here](/API.md).
 ```jsx
   import Formsy from 'formsy-react';
 
-  const MyAppForm = React.createClass({
+  const MyAppForm = createReactClass({
     getInitialState() {
       return {
         canSubmit: false
@@ -85,7 +85,7 @@ This code results in a form with a submit button that will run the `submit` meth
 ```jsx
   import Formsy from 'formsy-react';
 
-  const MyOwnInput = React.createClass({
+  const MyOwnInput = createReactClass({
 
     // Add the Formsy Mixin
     mixins: [Formsy.Mixin],

diff --git a/examples/components/Input.js b/examples/components/Input.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Formsy from 'formsy-react';
 
-const MyInput = React.createClass({
+const MyInput = createReactClass({
 
   // Add the Formsy Mixin
   mixins: [Formsy.Mixin],

diff --git a/examples/components/MultiCheckboxSet.js b/examples/components/MultiCheckboxSet.js
@@ -10,7 +10,7 @@ function contains(container, item, cmp) {
   return false;
 }
 
-const MyRadioGroup = React.createClass({
+const MyRadioGroup = createReactClass({
   mixins: [Formsy.Mixin],
   getInitialState() {
     return { value: [], cmp: (a, b) => a === b };

diff --git a/examples/components/RadioGroup.js b/examples/components/RadioGroup.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Formsy from 'formsy-react';
 
-const MyRadioGroup = React.createClass({
+const MyRadioGroup = createReactClass({
   mixins: [Formsy.Mixin],
 
   componentDidMount() {

diff --git a/examples/components/Select.js b/examples/components/Select.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Formsy from 'formsy-react';
 
-const MySelect = React.createClass({
+const MySelect = createReactClass({
   mixins: [Formsy.Mixin],
 
   changeValue(event) {

diff --git a/examples/custom-validation/app.js b/examples/custom-validation/app.js
@@ -29,7 +29,7 @@ Formsy.addValidationRule('isYearOfBirth', (values, value) => {
   return value < currentYear && value > currentYear - 130;
 });
 
-const App = React.createClass({
+const App = createReactClass({
   submit(data) {
     alert(JSON.stringify(data, null, 4));
   },
@@ -44,7 +44,7 @@ const App = React.createClass({
   }
 });
 
-const DynamicInput = React.createClass({
+const DynamicInput = createReactClass({
   mixins: [Formsy.Mixin],
   getInitialState() {
     return { validationType: 'time' };
@@ -79,7 +79,7 @@ const DynamicInput = React.createClass({
   }
 });
 
-const Validations = React.createClass({
+const Validations = createReactClass({
   changeValidation(e) {
     this.props.changeValidation(e.target.value);
   },

diff --git a/examples/dynamic-form-fields/app.js b/examples/dynamic-form-fields/app.js
@@ -54,7 +54,7 @@ const Fields = props => {
   );
 };
 
-const App = React.createClass({
+const App = createReactClass({
   getInitialState() {
     return { fields: [], canSubmit: false };
   },

diff --git a/examples/login/app.js b/examples/login/app.js
@@ -4,7 +4,7 @@ import { Form } from 'formsy-react';
 
 import MyInput from './../components/Input';
 
-const App = React.createClass({
+const App = createReactClass({
   getInitialState() {
     return { canSubmit: false };
   },

diff --git a/examples/reset-values/app.js b/examples/reset-values/app.js
@@ -11,7 +11,7 @@ const user = {
   hair: 'brown'
 };
 
-const App = React.createClass({
+const App = createReactClass({
   submit(data) {
     alert(JSON.stringify(data, null, 4));
   },

diff --git a/package.json b/package.json
@@ -23,7 +23,9 @@
     "react-component"
   ],
   "dependencies": {
-    "form-data-to-object": "^0.2.0"
+    "create-react-class": "^15.5.2",
+    "form-data-to-object": "^0.2.0",
+    "prop-types": "^15.5.7"
   },
   "devDependencies": {
     "babel-cli": "^6.6.5",
@@ -33,15 +35,14 @@
     "babel-preset-stage-2": "^6.5.0",
     "jsdom": "^6.5.1",
     "nodeunit": "^0.9.1",
-    "react": "^15.0.0",
+    "react": "^15.5.4",
     "react-addons-pure-render-mixin": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
+    "react-dom": "^15.5.4",
     "sinon": "^1.17.3",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0"
+    "react": "^0.14.0 || ^15.5.0"
   }
 }
diff --git a/src/Decorator.js b/src/Decorator.js
@@ -1,29 +1,9 @@
 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,
-          ...this.props
-        });
-      }
-    });
-  };
-};
+
+import Mixin from './Mixin.js';
+
+export default () => (Component) => Mixin((props) => {
+  return (
+    <Component {...props} />
+  )
+})