React Superform: Basic example

by Michał Załęcki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/4.0.5/validator.js"></script>
<script src="https://raw.githack.com/MichalZalecki/react-superform/master/lib/react-superform.min.js"></script>
<div id="root"></div>

CSS

.error {
  color: red;
}

Babel + JSX

class MyForm extends Superform {
  onSuccessSubmit(data) {
    console.log(data);
  }

  onErrorSubmit(errors, data) {}

  render() {
    return (
      <form noValidate onSubmit={ this.handleSubmit.bind(this) }>
        <input
          type="email" // validate email
          ref="email"  // ref is required to read the attributes
          name="email" // name field 
          valueLink={ this.linkStateOf("email") } // two way data binding
          required     // field is required
        />
        <p className="error">{ this.getErrorMessageOf("email") }</p>
        <input type="submit" />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById("root"));