Skip to content

mathanpec/simple-react-forms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Simple form implementation using react

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •