A simple way to work with Forms in React. This is my attempt to address complicate form rendering:
import { 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)
I appreciate any feedbacks, suggestions or ideas below. Thanks! :)
Top comments (1)
This project was renamed & moved to - github.com/ngduc/ui-form-field