React Form Value Handler

An easy to use form handler to distribute input components and handle settings and returns of your form inputs values within a react environment.

Build on top of react-semantic-ui

Installation

Use the package manager npm to install react-form-value-handler.

npm install react-form-value-handler

Usage

import React, { Component } from 'react';
import FormField from 'react-form-value-handler'

export default class MyForm extends Component {
  constructor(props) {
      super(props);
      // will be filled with FormField keyName/value pairs
      this.state = {  } 
      // will handle setting this component's state 
      this.formHandler = this.formHandler.bind(this)
  }

  formHandler = (stateProperty) => {
      this.setState({...stateProperty}) 
  }

  render() {
      const { currentYear, validateForm } = this.props
      const { carUser, location, yearIncome } = this.state

      return(
          <form id="myForm">

            <FormField 
              _key="field_1"
              keyName="yearIncome"
              tag="€"
              title={`Declared income in ${currentYear - 1} year`}
              value={yearIncome}   
              type='numeric'
              incrementation={500}
              formHandler={this.formHandler}        
            />

            <FormField 
              _key="field_2"
              keyName="location"   
              value={location}
              title="Your declared living address"
              type="text"
              tag="PC, City"
              placeholder="75009, Paris"
              formHandler={this.formHandler} 
            />

            <FormField
              _key="field_3"
              keyName="carUser"
              value={carUser}
              title="I use my car for my business trips"
              type="checkbox"
              formHandler={this.formHandler}
            />

            { 
              carUser &&
              <FormField 
                _key="field_1"
                keyName="usedFuel"
                title="What type of fuel do you use ?"
                type="select"
                value={[
                  {key:'fuel_1', value:'1', text:'Diesel'},
                  {key:'fuel_2', value:'2', text:'SP95'},
                  {key:'fuel_4', value:'3', text:'SP95-E10'},
                  {key:'fuel_5', value:'4', text:'SP98'}
                ]}
                formHandler={this.formHandler} 
              />
            }

            <button onClick={this.props.validateForm}>Confirm</button>

          </form>
        )
    }
}
/*  */

Props

• title {string} : the title of the field

• keyName {string} required : the key name of the pair key/value to set

• value {*} : the value of the pair key/value to set or that is already set or selection data in case of a "select" type

• formHandler {function} : function to call each time the value changes (see react-form-value-handler README.md example)

• type {string} : the type of input ("numeric", "text", "select", "checkbox") (default: "text")

• tag {string} : the tag to display next to the title

• incrementation {number} only for "numeric" types : number to add/substract when +/- buttons are clicked (default: 1)

• negativeAllowed {boolean} only for "numeric" types : allow negative numbers (default: false)

• noDivider {boolean} : indicate that field must be rendered with no dividers

• noBottomDivider {boolean} : indicate that field must be rendered with no divider on bottom

• noTopDivider : indicate that field must be rendered with no divider on top

• required : mark input as required with a red asterisk

• placeholder : input placeholder

• customComponent : display a custom component iso defaut component called with "type" (a custom component needs to handle its values changes by itself, use only if you want to take advantage of initializing the same FormField components within the same method instead of parsing data to determine a specific component or if you want to use our field styling anyway ;)

  styling props

• titleAlign : align field title either on "left", "center" or "right" (default: "left")

• containerStyle : styling for the formField container

• titleClassName : className of title

• tagClassName : className of tag

Important

A formHandler method MUST be passed to each FormField component in order for the value update to occur

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT