@braces/react-form

React components for form and input field management

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Dec 16, 2018Aug 25, 2018Minified + gzip package size for @braces/react-form in KB

Readme

React Form

npm Version

This package is deprecate, Please check @braces/reform

Install

1 Install react form as dependency

# Using yarn package manager
$ yarn add @braces/react-form

# Using npm package manager
$ npm install --save @braces/react-form

2 Import React form module

// ES6
import { Form } from "@braces/react-form"

// ES5
var Form = require("@braces/react-form").Form;

Example

  import React from "react";
  import { Form, Field } from "@braces/react-form";

  export default (props) => {
    return (
      <Form onSubmit={(e, values) => console.log(values)} validateOn={1}>
        <Field name="test1" render={(props) => (
          <div>
            <input {...props.input} />
            <ul>
              {props.errors.map((error, i) => <li key={i}>{error}</li>)}
            </ul>
          </div>
        )}
          validationRules={{
            required: true,
            maxLength: 10,
          }} />
        <Field name="test2" render={(props) => <input {...props.input} />} />
        <Field name="test3" render={(props) => <input {...props.input} />} />
        <button>Submit</button>
      </Form>
    );
  };

Contributing!

All contributions are super welcome!

License

React Form is MIT licensed.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.