DEV Community

Cover image for ui-form-field - A simpler way to work with Forms in React
Duc Ng
Duc Ng

Posted on

ui-form-field - A simpler way to work with Forms in React

ui-form-field is my attempt to address complicate form rendering in React. It is being used actively in many projects with positive feedbacks from engineers.

Features:

  • 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: react-select, multi-select, tag input with auto-complete, etc.
  • Simplify complicate use cases like: Dynamic (conditional) field rendering, mixing with other components within the form, custom fields.
  • Works well on mobile screens.
import { FormContainer, Form, Field, Button } from 'ui-form-field';

<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 checkbox name="singleCheckbox" />
    <Field singleSelect options={animals} name="singleSelect" />
    <Field multiSelect options={animals} name="multiSelect" />
    <Field tagSelect name="tags" options={tags} />
    <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>
)} />
Enter fullscreen mode Exit fullscreen mode

Result: (Full form, with validation (with yup) & error messages)

Example

Demo
Github

I appreciate any feedbacks, suggestions or ideas below. Thanks! :)

Top comments (2)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

ui-form-field looks easy to use, Duc Ng ๐Ÿ‘Š

And the funny thing is that the previous post in #react I see is the following post ๐Ÿ˜ฎ.

Your library seems to follow abstractions in the post.
And more over, there is a section called Form.Fields?, which might be of help for your library IMHO.

Collapse
 
ngduc profile image
Duc Ng

An interesting use of context. Thanks for sharing!