React Forms

React Forms library provides a set of tools for React to handle form rendering and validation.

Table of Contents

• Installation
• Usage
  • Validation
  • API Reference
    • <Field />
    • <Fieldset />
    • createValue({schema, value, onChange})
    • WithFormValue(Component)
  • Howto Guides
    • Customizing form fields
    • Pattern for reusable forms
• Examples
• Credits

Installation

To use version documented here you need to install beta tag from npm:

% npm install react-forms@beta

You would probably also need a module bundler such as Browserify or Webpack as React Forms is distributed as a set of CommonJS modules.

Usage

React Forms doesn't provide any <Form /> component, instead it makes implementing form components an easy task.

Note that examples are written using ES2015 syntax. You would probably use Babel with es2015 and react presets enabled to compile code to ES5 which is compatible with most of the current runtimes.

Basic form component.

This is the example where form value is managed as a part of local component state. Some might put form value in a Flux/Redux store instead.

importReactfrom'react'import{Fieldset,Field,createValue}from'react-forms'classFormextendsReact.Component{constructor(props){super(props)letformValue=createValue({value: props.value,onChange: this.onChange.bind(this)})this.state={formValue}}onChange(formValue){this.setState({formValue})}render(){return(<FieldsetformValue={this.state.formValue}><Fieldselect="firstName"label="First name"/><Fieldselect="lastName"label="Last name"/></Fieldset>)}}

Then you can use <Form /> component like any regular React component:

import{render}from'react-dom'render(<Formvalue={{firstName: 'Michael',lastName: 'Jackson'}}/>,document.getElementById('form'))

Validation

React Forms can validate form value using JSON schema:

letschema={type: 'object',properties: {firstName: {type: 'string'},lastName: {type: 'string'}}}

Simply pass it to a createValue(..) function:

letformValue=createValue({value, onChange, schema})

API Reference

<Field />

<Fieldset />

createValue({schema, value, onChange})

WithFormValue(Component)

Howto Guides

Customizing form fields

All components in React Forms conform to React Stylesheet API. That means that for injecting customization one needs react-stylesheet package to be installed:

% npm install react-stylesheet

Customizing label rendering:

importReactfrom'react'import{style}from'react-stylesheet'import{FieldasBaseField,LabelasBaseLabel}from'react-forms'functionLabel({label, schema}){return<BaseLabelclassName="my-label"label={label}schema={schema}/>}letField=style(BaseField,{Label: Label})

Customizing error list rendering:

importReactfrom'react'import{style}from'react-stylesheet'import{FieldasBaseField,ErrorListasBaseErrorList}from'react-forms'functionErrorList({formValue}){return<BaseErrorListclassName="my-error-list"formValue={formValue}/>}letField=style(BaseField,{ErrorList: ErrorList})

Form field with custom input component:

importReactfrom'react'import{Field}from'react-forms'importDatepickerfrom'datepicker'functionDateField(props){return<Field{...props}Input={Datepicker}/>}

Implementing form field component from scratch:

importReactfrom'react'import{WithFormValue}from'react-forms'classFieldextendsReact.Component{render(){let{formValue}=this.propsreturn(<div><label>{formValue.schema.label}</label><inputvalue={formValue.value}onChange={this.onChange}/></div>)}onChange=(e)=>this.props.formValue.update(e.target.value)}Field=WithFormValue(Field);

Pattern for reusable forms

importReactfrom'react'import{Fieldset}from'react-forms'classIndividualFieldsetextendsReact.Component{staticschema={type: 'object',properties: {firstName: {type: 'string'},lastName: {type: 'string'}}}staticvalue={firstName: 'John',lastName: 'Doe'}render(){let{label, ...props}=this.propsreturn(<Fieldset{...props}><label>{label}</label><Fieldselect="firstName"label="First name"/><Fieldselect="lastName"label="Last name"/></Fieldset>)}}

Later you can compose schema and initial form value using IndividualFieldset.schema and IndividualFieldset.value static properties and use <IndividualFieldset /> component itself for rendering.

letschema={type: 'object',properties: {mother: IndividualFieldset.schema,father: IndividualFieldset.schema}}letvalue={mother: IndividualFieldset.value,father: IndividualFieldset.value}classFamilyFormextendsReact.Component{constructor(props){super(props)this.state={formValue: createValue({schema, value,this.onChange})}}onChange=(nextFormValue)=>{this.setState({formValue: nextFormValue})}render(){return(<FieldsetformValue={this.state.formValue}><IndividualFieldsetselect="mother"label="Mother"/><IndividualFieldsetselect="father"label="Father"/></Fieldset>)}}

Examples

Examples are located at examples folder. To run.

cdexamplesnpminstallnpmstart

open http://localhost:4000 in browser

Credits

React Forms is free software created by Prometheus Research, LLC and is released under the MIT license.