simple-react-forms

Simple form implementation using react which supports the following

• Multiple input types (select, textarea, email, number etc.,)
• Validations
• Custom styling
• Showing help text on focus of control
• Custom input type support (react-select)
• On-demand rendering of the controls. This greatly improves the performance if the form has many field controls.

###Installation

  npm install --save simple-react-forms

  // ES6
  import {Form, Field} from 'simple-react-forms';

###Basic Usage

import {Form, Field} from 'simple-react-forms';
import React, {Component} from 'react';

class SimpleFormDemo extends Component {
  onClickHandler () {
    console.log(this.refs['simpleForm'].getFormValues());
  }
  render () {
    return (
    <div>
      <Form ref='simpleForm'>
          <Field
            name='city'
            label='Enter City name'
            type='text'
          />
          <Field
            name='state'
            label='Enter State name'
            type='text'
          />
      </Form>
      <button onClick={this.onClickHandler.bind(this)}>Submit</button>
    </div>

    );
  }
}

Note: ref for Form element is a mandatory prop. Since we have to get the entered form values through getFormValues method exposed on Form instance. Check the onClickHandler in the example above for the sample usage of getFormValues method. For example, In the above example calling getFormValues after entering Bangalore in the input field will return the following object.

{
  'city': 'Chennai',
  'state': 'Tamilnadu'
}

Using Validation

  <Form ref='simpleForm'>
          <Field
            name='city'
            label='Enter City name'
            type='text'
            validators={[
            'required',
            (value) => {
              if (isCityServicable(value)) {
                return {valid: true}
              }
              else {
                return {valid: false, error: 'Entered city is not servicable'}
              }
            }
            ]}
          />
      </Form>

validators props takes array of validation condition. For the basic validation checks like required, you can just pass required as string. And for custom validations, you can pass function as shown in the example above. Validation functions are executed based on its order in validators array. If a validation function returns {valid: true} then the check goes to next validation function. If it returns {valid: false, error: 'Entered city is not serviceable'} then the validation stops there and the error message is shown on the field.

Finally to check the form validity, call the method isValid() exposed on Form instance. So ideally you have to first check for validity of the form using isValid() and then getFormValues() should be called to get the values. Check below for usage.

  if(this.refs['simpleForm'].isValid()){
    this.submitData(this.refs['simpleForm'].getFormValues());
  }

Using custom elements

There might be cases when you want to use some custom input controls like react-select as an input field. In those cases, that field needs to passed as element props. All the props necessary for that custom component can be passed directly to it. Make sure the controls you use supports onChange, onBlur and other basic props.

import {Form, Field} from 'simple-react-forms';
import React, {Component} from 'react';

class SimpleFormDemo extends Component {
  render () {
    let options = [{
      id: 'blr',
      label: 'Bangalore'
    }, {
      id: 'chn',
      label: 'Chennai'
    }];
    return (
    <div>
      <Form ref='simpleForm'>
          <Field
            name='city'
            label='Select City'
            element= {
              <Select
                options={options}
                valueAccessor={(selectedValue) => selectedValue.id}
              />
            }
          />
      </Form>
    </div>

    );
  }
}

###Advanced usage for performant behavior

simple-react-forms can be made performant in two ways as follows.

• By setting onDemand props as true for Form component. This will make the form component to just reserve the space for it if it is not in view port area and renders the actual form only when it comes in view area. Sample use case could be rendering a editable table with large number of rows and each row is a form component with multiple fields.
• By setting optimize props as true on Field Component. On setting this props, Field Component will just render a simple text box and the actual field element will be rendered only on mouse over of the input. Sample use case is in case of large number of select boxes with large number of options for each of them. So rendering a simple text box first and changing them to select on mouse over gives huge performance boost.

###Methods on Form Component

Following methods are available on Form component instance. Check the examples above for the usage of this methods.

Method Name | Return Value ----------- | ------------ getFormValues| An object with field names and values as keys and values respectively isValid| true or false

###Props on Form Component

Name | type | Required | Default Value | Description ---- | ---- | -------- | ------------- | ----------- onDemand | Boolean | false | false | If set to true, it just reserves space for the form element and renderes the actual form only when it comes to view area.

###Props on Field Component

Name | type | Required | Default Value | Description ---- | ---- | -------- | ------------- | ----------- name | string | true | | This is the unique identifier for the field inside form. label| string| false| | Label to used for that field value| string, bool, number| false| | Value of the field defaultValue| string, bool, number| false| | initial value setting for the field type| string| false| text| Type of the field. Currently text, textarea, select, radio and checkbox is supported. Custom input types like react-select is also supported. But that is through element prop options| Array | false | | Options for Select and radio controls. It can either be like [{text: 'Bangalore', value: 'bang'}] or ['Bangalore', 'Chennai']. element| React Component or html elements|false|| This is for using custom input controls like react-select. Check the usage in Using custom elements section. valueAccessor| function | false | | Field Component gets the value of the input field by listening on onChange event. In case of custom elements, onChange may recieve different arguments other than event object or the actual value. So In that case valueAccessor method is used to get the actual value that needs to be bind to the field. Check the usage in Using custom elements section. validators| Array | false | | Used for validation. Check the usage in Using Validation section. help | String | false | | Used to show help text for fields on field focus inline | Boolean | false | false | Setting it true will render an inline form with label, controls and help text in same line onChange | function | false | | If you want to listen on change of field value placeholder| String | false | | Just like any other placeholder :P disabled | Boolean | false | false | Used to disable the field style | Object | false | | Overrides the default root style of field. Sample use case id to give width in case if you want to have multiple fields in same line. labelStyle | Object | false | | Overrides the default label style. Setting width color and other typical style values :) controlStyle | Object | false | | Overrides the default input element style. helpStyle | Object | false | | Overrides the default help text style. optimize | Boolean | false | false | If set to true, renders a plain input of type text by default and renders the actual field element on hover.