react-formutils v1.0.1

React-Formutils

Make Form handling with React great again

Installation

npm

npm install react-formutils

yarn

yarn add react-formutils

Also you need to have react (v15 or higher) installed because React-Formutils relies on it as a peer dependency.

Examples

import {InputBase, FieldErrorContainer, FormBase} from "react-formutils"

/**
* An Input that sync its value with a parent form and receives an error message from the form.
* The inputs error message will only be shown, when the input was touch (e.g. blured) at least once.
*/
class MyInput extends InputBase {
    render() {
        return (
            <p>
                <label>{this.props.label}</label>
                { this.renderInput({type: this.props.type}) }
                { this.isTouched() && this.getError() && <FieldErrorContainer forms={this.props.forms}/> }
            </p>
        )
    }
}

/**
* A form that will show an error message if its value is invalid and that prevents submission as long as its data is invalid.
* On every value change its `getErrors` function will be called to calculate current error state and pass it to the corresponding controls.
*/
class MyForm extends FormBase {
    render() {
        return (
            <div>
                <MyInput label="Username" forms={[this, "username"]}/>
                <MyInput label="Password" type="password" forms={[this, "password"]}/>
                <MyInput name="Stay loged in" type="checkbox" forms={[this, "logged_in"]}/>
                {!this.isValid() &&
                <b>Cannot submit: Form is invalid</b>
                }
                <button disabled={!this.canSubmit()} onClick={this.submit}>Submit</button>
            </div>
        );
    }

    onSubmit() {
        alert(JSON.stringify(this.state.form.data))
    }

    getErrors() {
        const {username, password, color} = this.state.form.data;
        return {
            username: (!username || !username.length ) && "Reguired",
            password: (!password || password.length < 6) && "Min length is 6 characters"
        }
    }    
}

import {InputContainer, FieldErrorContainer, FormContainer} from "react-formutils"


/*
* This is basically the same example as above but using "Container Components". They are in fact extensions of the inputbase and formbase classes.
*/

const MyInput = ({label, forms, type}) => <InputContainer
        type={type}
        forms={forms}
        render={({input, touched, error}) =>
            <p>
                <label>{label}</label>
                <input {...input} type={type} />
                { touched && error && <FieldErrorContainer forms={forms}/> }
            </p>
        }
    />

const MyForm = () => <FormContainer
    render={({form, valid, canSubmit, submit}) =>
        <div>
            <MyInput label="Username" forms={[form, "username"]}/>
            <MyInput label="Password" type="password" forms={[form, "password"]}/>
            <MyInput label="Stay loged in" type="checkbox" forms={[form, "logged_in"]}/>
            {!valid &&
            <b>Cannot submit: Form is invalid</b>
            }
            <button disabled={!canSubmit} onClick={submit}>Submit</button>
        </div>
    }
    onSubmit={(data) =>
        alert(JSON.stringify(data))
    }
    validate={({username, password}) =>
        ({
            username: (!username || !username.length ) && "Reguired",
            password: (!password || password.length < 6) && "Min length is 6 characters"
        })
    }    
    />

For more examples, see the examples directory

Api & Documentation

View the Api

License

MIT