react-formutils
v1.0.1
Published
Utility functions and components for building forms with react quickly.
Downloads
1
Readme
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
License
MIT