ez-react-form
A simple way to work with Forms in React.
- Live Demo: Codesandbox
- Code examples: Link
🌟 Features
$ npm install ez-react-formimport { FormContainer, Form, Field, Button } from 'ez-react-form'; <FormContainer onSubmit={this.onSubmit} render={props => ( <Form use="bootstrap4"> <Field label="Text" name="text" /> <Field name="password" /> <Field textarea name="textarea" /> <Field select options={animals} name="select" /> <Field radios options={genders} name="radio" /> <Field checkboxes options={roles} name="checkboxes" /> <Field number name="number" /> <Field date name="date" /> <Field time name="time" /> <Field toggle inline name="toggle" /> <Field file label="File Upload" name="file1" /> <Field file withPreview label="File Upload (with Preview)" name="file2" /> <Field range name="range" /> <Button type="submit"/> <Button>Cancel</Button> </Form>)} />
Result: (Full form, validation (with yup) & error messages)
- Render different
form layouts
: Bootstrap 4, Semantic UI, Spectre and more. (including horizontal layout, inline fields) - Compatible with
formik
. This is built on top of formik and can be used together with it (for custom fields, etc.) - Support popular and advanced field types.
- Works well on mobile screens.
📖 Documentation
TODO:
- Support more form layouts: Material, etc.
- More field types: Date Range, etc.
- (File a PR to request any feature, field type, etc.)
🙌 Thanks
All contributions are welcome!