Documentation: HERE
NPM: HERE
DON'T FRET!
react-form became two large and bloated to maintain. We wanted a fresh start where we could cover the 90% use case
and also purge the library of unnecessary dependencies such as Redux. Informed is completely from scratch, but it keeps
almost the exact same interface, so migration is very simple!
- Test coverage! When writing informed we focused heavily on test coverage. Therefore informed is very stable.
- Simplicity! We wanted a simpler interface that allowed developers to get up and running quicker.
- Efficiency! Informed focuses on efficient rendering, so you can scale your forms easily.
- 90% usecase. Informed has most of the bells and whistles that
react-formhad, however, in order to create a more stable library, we wanted to focus on providing a library that could support the 90% usecase. So we got rid of a few things that we decided could be up to the developer.
We are currently working on migration docs but for now please look at the Changelog.md.
Simple, powerful, highly composable forms in React
Go to live examples, code and docs!
- 🚀 Lightweight and fast.
- 🔥 Built-in input primitives for building quickly.
- ⚖️ Scales from tiny to massively complex forms with ease.
- 🚚 Easily integrate with 3rd party components or build your own!
- ✍️ Nested Fields and ultra-composable syntax for complex form shapes.
- ⏲ Asynchronous validation
- 🎛 Simple API that supports manipulating values, errors, warnings, and successes
- 👉 Render Props!
- 😂 Works in IE (with a polyfill or two)
Sign up for the React-Tools Slack Org!
npm install --save react-form
import { Form, Text, Radio, RadioGroup, TextArea, Checkbox } from 'react-form';
const ExampleForm = () => (
<Form render={({
submitForm
}) => (
<form onSubmit={submitForm}>
<Text field="firstName" placeholder='First Name' />
<Text field="lastName" placeholder='Last Name' />
<RadioGroup field="gender">
<Radio value="male" />
<Radio value="female" />
</RadioGroup>
<TextArea field="bio" />
<Checkbox field="agreesToTerms" />
<button type="submit">Submit</button>
</form>
)} />
)import { Form, Text } from "react-form";
const ExampleForm = () => (
<Form
render={({ submitForm, values, addValue, removeValue }) => (
<form onSubmit={submitForm}>
<Text field="firstName" placeholder="First Name" />
<Text field="lastName" placeholder="Last Name" />
<div>
Friends
{values.friends &&
values.friends.map((friend, i) => (
// Loop over the friend values and create fields for each friend
<div>
<Text
field={["friends", i, "firstName"]}
placeholder="First Name"
/>
<Text
field={["friends", i, "lastName"]}
placeholder="Last Name"
/>
// Use the form api to add or remove values to the friends array
<button type="button" onClick={() => removeValue("friends", i)}>
Remove Friend
</button>
</div>
))}
// Use the form api to add or remove values to the friends array
<button type="button" onClick={() => addValue("friends", {})}>Add Friend</button>
</div>
<button type="submit">Submit</button>
</form>
)}
/>
);import { Form, FormApi, NestedField, Text } from "react-form"
// Reuse The user fields for the user and their friends!
const UserFields = () => (
<div>
<Text field="firstName" placeholder="First Name" />
<Text field="lastName" placeholder="Last Name" />
</div>
)
const ExampleForm = () => (
<Form
onSubmit={values => console.log(values)}
render={({ submitForm, values, addValue, removeValue }) => (
<form onSubmit={submitForm}>
<UserFields />
<NestedField
field="friends"
render={() => (
// Create a new nested field context
<div>
Friends
{values.friends &&
values.friends.map((friend, i) => (
<div key={i}>
<NestedField
field={i}
render={() => (
<UserFields /> // Now the user fields will map to each friend!
)}
/>
<button type="button" onClick={() => removeValue("friends", i)}>
Remove Friend
</button>
</div>
))}
<button type="button" onClick={() => addValue("friends", {})}>
Add Friend
</button>
</div>
)}
/>
<button type="submit">Submit</button>
</form>
)}
/>
)Visit react-form.js.org for examples and documentation for 3.x.x of React-Form.
Older versions: