ez-react-form

    0.7.0 • Public • Published

    ez-react-form

    Build Status

    A simple way to work with Forms in React.

    🌟 Features

    $ npm install ez-react-form
    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)

    Screenshot

    • 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

    Change Log

    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!

    formik

    Install

    npm i ez-react-form

    DownloadsWeekly Downloads

    1

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    1.28 MB

    Total Files

    20

    Last publish

    Collaborators

    • ngduc