react-components-form

1. Features
2. Documentation
3. Installation
4. How to use
5. Contribute
6. License

Features

• sync validation
• async validation (Promise)
• schema validation (form-schema-validation)
• custom validation methods
• fields components

- [TextField](https://rstgroup.gitbooks.io/react-components-form/content/fields/textfield.html)
- [TextareaField](https://rstgroup.gitbooks.io/react-components-form/content/fields/textareafield.html)
- [SelectField](https://rstgroup.gitbooks.io/react-components-form/content/fields/selectfield.html)
- [NumberField](https://rstgroup.gitbooks.io/react-components-form/content/fields/numberfield.html)
- RadioField
- [CheckboxField](https://rstgroup.gitbooks.io/react-components-form/content/fields/checkboxfield.html)
- [DateField](https://rstgroup.gitbooks.io/react-components-form/content/fields/datefield.html)
- [AutocompleteField](https://rstgroup.gitbooks.io/react-components-form/content/fields/autocompletefield.html)
- [ObjectField](https://rstgroup.gitbooks.io/react-components-form/content/fields/objectfield.html)
    - wrap fields to object
- [ListField](https://rstgroup.gitbooks.io/react-components-form/content/fields/listfield.html)
    - wrap field to array
    - clone field component (array of fields)
- [SubmitField](https://rstgroup.gitbooks.io/react-components-form/content/fields/submitfield.html) (button to submit form)

• custom fields (FieldConnect)
• FieldConnect
• field can have object structure (ObjectField)
• field can have array structure (ListField)
• FormEventsEmitter

- listen on form events
- emit events on form
- register custom events

• form elements (you can create component with fields and use it many times)
• FieldsRestyle (you can restyle all components)
• fields with Bootstrap styles

Documentation

• version ^3.0.0

• version ^2.0.0

Installation

$ npm install react --save

$ npm install react-components-form --save

If you want schema validation please install form-schema-validation

$ npm install form-schema-validation --save

How to use

import React from 'react';
import { Form, TextField, SubmitField } from 'react-components-form';
import Schema from 'form-schema-validation';

const loginSchema = new Schema({
  login: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true
  }
});

const LoginForm = () => (
  <Form
    schema={loginSchema}
    onSubmit={model => console.log(model)}
    onError={(errors, data) => console.log('error', errors, data)}
  >
    <TextField name="login" label="Login" type="text" />
    <TextField name="password" label="Password" type="text" />
    <SubmitField value="Submit" />
  </Form>
);

export default LoginForm;

Contribute

• use eslint rules
• write clean code
• unit tests (min 85% of your code should be tested)
• code of conduct

License

react-component-form package are MIT licensed