feform (Iron-Form)
Simple Reactive Forms
Requirements
- NPM
- React 15.2+
Installation
Available through NPM: npm install --save feform
Import directly into your project: import Form from 'feform';
Usage
Creating a Basic Input
Create custom inputs for your project by wrapping any React component
with an feinput
:
import {feinput} from 'feform';
const Field = feinput(({label, setValue, value, type = 'text', ...rest}) => {
const onChange = function(event) {
setValue(event.target.value);
};
return (
<fieldset>
<label>{label}</label>
<input type={type} onChange={onChange} value={value}/>
</fieldset>
);
});
All components decorated with feinput
receive the following props
:
- value (string)
- setValue (fn)
- clearValue (fn)
- resetValue (fn)
- errors (Array)
- pristine (bool)
setValue
must be invoked the set the value of your inpur within your <Form>
component.
Creating a Basic Form
import Form from {feform};
const BasicForm = (props) => {
return (
<div>
<h2>Basic Form</h2>
<Form submit={event => console.log(event)}>
<Field name="username" label="Username"/>
<Field name="password" label="Password" type="password"/>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</Form>
</div>
);
};
<Form>
components support passing the following props
:
- submit (fn) - invoked upon submission
- afterReset (fn) - invoked after all inputs are reset
- validityChange (fn) - invoked every time an
feinput
'ssetValue
method is called
Additionally, the following methods are available on a <Form>
component:
- reset() - used to externally reset the
<Form>
- submit() - used to externally submit the
<Form>
- runValidations() - used to manually force a validation check, ultimately invoking
props.validityChange
if defined
Adding Validations
The underlying validation engine behind Iron-Form uses validate.js. See their docs for detailed examples.
Validations are passed to Input components like so:
const BasicForm = (props) => {
return (
<div>
<h2>Basic Form</h2>
<Form submit={event => console.log(event)}>
<Field name="username"
label="Username"
validations={[
{presence: true},
{email: true}
]}/>
<Field name="password"
label="Password"
type="password"
validations: {[
{presence: true},
{length: {min: 10}}
]}/>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</Form>
</div>
);
};
Validations run and are reported 1. whenever a form is submitted and 2. whenever setValue
on an Input component is invoked.
Default/Initial Values
Initial or default values can be set easily by passing the initialValue
prop on any feinput
:
const LocationForm = (props) => {
return (
<div>
<h2>Zip Code Form</h2>
<Form submit={event => console.log(event)}>
<Field name="zip"
label="Zip Code"
initialValue="90210"
validations={[
{presence: true},
{length: {is: 5},
{numericality: {onlyInteger: true}}
]}/>
<button type="submit">Find me</button>
</Form>
</div>
);
};
Internally an feinput
converts the initialValue
to value
prior to the first render cycle. initialValue
is not recommended to be used within your input.