react-chloroform

FormInputs, initialState and reset button.

by darrikonn

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://rawgit.com/darrikonn/react-chloroform/master/dist/react-chloroform.js"></script>
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="root"></div>
</body>
</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#root {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.fieldError {
  color: #a94442;
}

.react-chloroform-error {
  border-color: #a94442 !important;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0,0,0,.075) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,0,0,.075) !important;
}

React

const {
  Form,
  FormInput,
  Button,
  ChloroformError,
  TextArea,
  Checkbox
} = ReactChloroform;

const isRequired = val => (val && val.length > 0) || "This field is required";

class App extends React.Component {
  handleSubmit = model => console.log(model);

  render() {
    const initialState = {
      email: "example@example.com",
      name: "John Doe"
    };

    return (
      <div className="container col-md-12" style={{ marginTop: "20px" }}>
        <Form
          initialState={initialState}
          onSubmit={this.handleSubmit}
          className="form-horizontal"
        >
          <div className="container">
            <div className="form-group has-error">
              <label htmlFor="email_1" className="col-sm-2 control-label">
                Email
              </label>
              <div className="col-sm-10">
                <FormInput
                  model="email"
                  id="email_1"
                  className="form-control"
                  validator={[isRequired]}
                />
                <ChloroformError
                  model="email"
                  component={({ error }) => <p className="fieldError">{error}</p>}
                />
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="name_1" className="col-sm-2 control-label">
                Name
              </label>
              <div className="col-sm-10">
                <FormInput model="name" id="name_1" className="form-control" />
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="about_1" className="col-sm-2 control-label">
                About
              </label>
              <div className="col-sm-10">
                <TextArea
                  model="about"
                  id="about_1"
                  placeholder="Write something about yourself..."
                  rows={5}
                 ...