This package has been deprecated

Author message:

forever

react-form-to-state

A simple react form binding helper which utilizes valueLink prop.

Install:

npm install -S react-form-to-state

Use:

Connect the wrapper

import React, { Component } from "react"
import connectForm from "react-form-to-state"
 
class Form extends Component {
  render(){
    return ( ... );
  }
}
export default connectForm( Form );

Bind props

<input valueLink={ this.props.bindAs( "fieldName1" ) } />
<input type="checkbox" checkedLink={ this.props.bindAs( "fieldName2" ) } />

Your form data is binded as this.state.form. You can set a custom prop name this way: this.props.bindAs( "fieldName1", "myCustomFormName" )

Complete example

import React, { Component } from "react"
import connectForm from "react-form-to-state"
 
class Form extends Component {
  _submit( ev ){
    ev.preventDefault()
    console.log( this.state.loginForm );
  }
  render(){
    return <form onSubmit={ this._submit.bind( this ) }>
      <input type="text" valueLink={ this.props.bindAs( "login", "loginForm" ) } />
      <input type="password" valueLink={ this.props.bindAs( "password", "loginForm" ) } />
      <label>
        <input type="checkbox" checkedLink={ this.props.bindAs( "remember", "loginForm" ) } />
        Keep me signed in
      </label>
      <button>Submit</button>
    </form>;
  }
}
export default connectForm( Form );