ICFormable - React Forms

ICFormable provides a consistent way to create forms, inputs, and validations using React.

Features

• Function and flexible validation using Validator.js (https://github.com/chriso/validator.js) or custom regex
• Flexibility to build custom inputs
• onSubmit callback with form model serialized. No more “e.target.value” for every input!
• Pass “serverErrors” to the form that will map to each component appropriately

How to use

install

npm install ic-formable

Components

Form

The base component to wrap all inputs types in to inherit ICFormable functionality.

Props:

• onSubmit - Submit callback that will provide model object w/ form values with key being “name” attribute
• serverErrors - marks errors on each input based on the input's “name” attribute
• formProps - Props to pass to html element

import{Form}from'icformable'importICTextFieldfrom'store_app/components/shared/ICFormable/ICTextField'classSomeComponentextendsReact.Component{state={serverErrors: null}handleFormSubmit=(model)=>{console.log(model)}render(){constformProps={}// HTML form propsreturn(<FormonSubmit={this.handleFormSubmit}serverErrors={this.state.serverErrors}formProps={formProps}><ICTextFieldfloatingLabelText="Email"name="email"hintText="jonnyappleseed@example.com"validations={{isEmail: null,isLength: {min: 3,max: 15}}}validationErrorText="Sorry, please enter a valid email."required/><buttontype="submit"> Submit </button></Form>)}}exportdefaultSomeComponent

Build Custom Components

FormComponent

In order to build custom inputs you'll want to use FormComponent as a Higher Order Component to inherit validation and form functionality.

Props:

• name (required) - the key for the form model
• disabled - to disable the input
• required - to mark the field as a required field
• regexValidation - a regex string to validate via regex
• validations - Validator.js (https://github.com/chriso/validator.js) validations use syntax: {validatorMethod: arguments}

import{FormComponent}from'icformable'
@FormComponentclassICCustomInputextendsReact.Component{staticpropTypes={name : React.PropTypes.string.isRequired,disabled: React.PropTypes.bool,required: React.PropTypes.bool,}render(){return(<div><inputname={this.props.name}disabled={this.props.disabled}required={this.props.required}/></div>)}}exportdefaultICCustomInput