Update usage of HOC Input Component in README and code example

README.md

@@ -83,18 +83,26 @@ This code results in a form with a submit button that will run the `submit` meth
 
 #### Building a form element (required)
 ```jsx
-  import Formsy from 'formsy-react';
-
-  const MyOwnInput = React.createClass({
+  import React from 'react';
+  import Formsy, { HOC as FormsyWrapper } from 'formsy-react';
+
+  class MyOwnInput extends React.Component { 
+
+    constructor() {
+      super();
+      this.changeValue = this.changeValue.bind(this);
+    }
 
-    // Add the Formsy Mixin
-    mixins: [Formsy.Mixin],
+    static propTypes = {
+       setValue: React.propTypes.func,
+       showError: React.propTypes.func,
+       showRequired: React.propTypes.func,
+       getErrorMessage: React.propTypes.func
+    };
 
-    // setValue() will set the value of the component, which in
-    // turn will validate it and the rest of the form
     changeValue(event) {
       this.setValue(event.currentTarget.value);
-    },
+    }
 
     render() {
       // Set a specific className based on the validation
@@ -110,12 +118,16 @@ This code results in a form with a submit button that will run the `submit` meth
 
       return (
         <div className={className}>
-          <input type="text" onChange={this.changeValue} value={this.getValue()}/>
+          <input
+            type="text"
+            onChange={this.changeValue}
+            value={this.getValue()}
+          />
           <span>{errorMessage}</span>
         </div>
       );
-    }
-  });
+  }
+  export default FormsyWrapper(MyOwnInput);
 ```
 The form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value.
 

examples/components/Input.js

@@ -1,16 +1,31 @@
 import React from 'react';
-import Formsy from 'formsy-react';
+import Formsy, { HOC as FormsyWrapper } from 'formsy-react';
 
-const MyInput = React.createClass({
+class MyInput extends React.Component {
 
+  constructor() {
+    super();
+    this.changeValue = this.changeValue.bind(this);
+  }
+
+  static propTypes = {
+    title: React.propTypes.string,
+    name: React.propTypes.string,
+    className: React.propTypes.string,
+    type: React.propTypes.string,
+    setValue: React.propTypes.func,
+    showError: React.propTypes.func,
+    showRequired: React.propTypes.func,
+    getErrorMessage: React.propTypes.func
+  }
   // Add the Formsy Mixin
-  mixins: [Formsy.Mixin],
 
   // setValue() will set the value of the component, which in
   // turn will validate it and the rest of the form
   changeValue(event) {
-    this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
-  },
+    this.props.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
+  }
+
   render() {
 
     // Set a specific className based on the validation
@@ -19,26 +34,29 @@ const MyInput = React.createClass({
     // passed to the input. showError() is true when the
     // value typed is invalid
     const className = 'form-group' + (this.props.className || ' ') +
-      (this.showRequired() ? 'required' : this.showError() ? 'error' : '');
+      (this.props.showRequired() ? 'required' : this.props.showError() ? 'error' : '');
 
     // An error message is returned ONLY if the component is invalid
     // or the server has returned an error message
-    const errorMessage = this.getErrorMessage();
+    const errorMessage = this.props.getErrorMessage();
 
     return (
       <div className={className}>
-        <label htmlFor={this.props.name}>{this.props.title}</label>
+        <label
+          htmlFor={this.props.name}>
+          {this.props.title}
+        </label>
         <input
           type={this.props.type || 'text'}
           name={this.props.name}
           onChange={this.changeValue}
-          value={this.getValue()}
+          value={this.props.getValue()}
           checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
         />
         <span className='validation-error'>{errorMessage}</span>
       </div>
     );
   }
-});
+}
 
-export default MyInput;
+export default FormsyWrapper(MyInput);