simple-react-forms v2.0.0

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.

###Props on Form Component

###Props on Field Component