React Base Form

A base form component for React applications

Install

npm install --save react-base-form validate.js

Note: validate.js it's a peer dependency

Usage

import React, { Component } from "react";
import BaseForm from "react-base-form";
 
const initialState = { name: "Hello", email: "", extraInformation: { dob: "" } };
const validations = {
  name: {
    presence: { allowEmpty: false }
  },
  "extraInformation.dob": { presence: { allowEmpty: false } }
};
 
class Example extends Component {
  onSubmit = (validate, state) => event => {
    event.preventDefault();
    if (validate()) {
      this.props.onSubmit(state);
    }
  };
 
  render() {
    return (
      <BaseForm initialState={initialState} validations={validations}>
        {({ onChange, state, errorsFor, validate, errors }) => (
          <div>
            <input value={state.name} onChange={onChange("name")} />
            {errorsFor("name").map(error => (
              <p key={error}>{error}</p>
            ))}
            <br />
            <input type="email" value={state.email} onChange={onChange("email")} />
            {errorsFor("email").map(error => (
              <p key={error}>{error}</p>
            ))}
            <br />
            <input
              type="date"
              value={state.extraInformation.dob}
              onChange={onChange("extraInformation.dob")}
            />
            {errorsFor("extraInformation.dob").map(error => (
              <p key={error}>{error}</p>
            ))}
            <br />
            <button onClick={this.onSubmit(validate, state)}>Save</button>
          </div>
        )}
      </BaseForm>
    );
  }
}

License

MIT © cherta