REACT COMPONENTS FORM v3

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
  • TextareaField
  • SelectField
  • NumberField
  • RadioField
  • CheckboxField
  • DateField
  • AutocompleteField
  • ObjectField
    • wrap fields to object
  • ListField
    • wrap field to array
    • clone field component (array of fields)
  • SubmitField (button to submit form)
• custom fields (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