A simple way to work with Forms in React.
- Live Demo: Codesandbox
- Code examples: Link
$ npm install ez-react-form
import { FormContainer, Form, Field, Button } from 'ez-react-form';
<FormContainer onSubmit={this.onSubmit} render={props => (
<Form use="bootstrap4">
<Field>Text Field | text</Field>
<Field password>Password | password</Field>
<Field textarea>Textarea | textarea</Field>
<Field select options={animals}>Select | select</Field>
<Field radios options={genders}>Radios | radio</Field>
<Field checkboxes options={roles}>Checkboxes | checkboxes</Field>
<Field number>Number | number</Field>
<Field date>Date | date</Field>
<Field time>Time | time</Field>
<Field toggle inline>Toggle | toggle</Field>
<Field file>File Upload | file1</Field>
<Field file withPreview>File Upload (with Preview) | file2</Field>
<Field range>Range | range</Field>
<Button type="submit"/>
<Button>Cancel</Button>
</Form>
)}
70C4
/>Result: (Full form, validation (with yup) & error messages)
- Shorthand syntax
<Field>Label | Placeholder | name</Field>(yes, child is a string for convenience, props work too if you prefer that). Inspired by Styled Component literal string for CSS. - Render different form layouts: Bootstrap4, Spectre and more.
- Compatible with formik. This is built on top of formik and can be used together with it (for custom fields, etc.)
TODO:
- Support: Material, Semantic UI and more.
- More field types: Date Range, etc.
- (File a PR to request any feature, field type, etc.)
All contributions are welcome!