Label305 / Bonn-Form

[WIP] Form handling for React with size in mind

Bonn Form

Form handling for React with size in mind

Work in progress!

Bonn Form will distribute propagating of state changes to specific parts of your form, in other words: only update those parts of your form that actually changed.

Usage

We're using composition to add functionality to our forms, you initialize Bonn-Form with the Bonn composer:

import {Bonn} from '...to-be-determined'

class MyForm extends React.Component {
    render() {
        //... your form goes here
    }
}

export default Bonn(MyForm);

To able a field to work with Bonn-Form use the Field decorator

import {Field} from '...to-be-determined'

class MyTextField extends React.Component {
    render() {
        return <div>
            <input 
                type="text" 
                name={this.props.name} 
                value={this.props.value} 
                onChange={e => this.props.onChange(e.target.value)}/>
            {this.props.validationErrors}
        </div>
    }
}

export default Field(MyTextField);

After which you can use it in your form:

render() {
    return <div>
        <MyTextField name="foo" value="anything initial" form={this.props.form}/>
        <MyTextField name="bar" value="some other val" form={this.props.form}/>
    </div>
}