Never-ending Pumpkin Mulch

    ui-form-field
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.3 • Public • Published

    ui-form-field

    Build Status

    A simple way to work with Forms in React.

    🌟 Features

    • Lightweight: 22 kb
    • 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 custom advanced field types: react-select, multi-select, tag input with auto-complete.
    • Simplify use cases like: Dynamic (conditional) field rendering, mixing with other components within the form, custom fields.
    • Works well on mobile screens.
    $ npm install ui-form-field
     
    import 'ui-form-field/lib/css/bootstrap4.css';
    import { FormContainer, Form, Field, Button } from 'ui-form-field';
    import { SingleSelect, MultiSelect } from 'ui-form-field/lib/custom'; // requires 'react-select'
     
    <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 custom={SingleSelect} options={animals} name="singleSelect" />
        <Field custom={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>
    )} />

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

    Screenshot

    📖 Development

    $ yarn dev        Start Dev mode
    $ yarn test       Run tests (jest & puppeteer in headless mode)
    $ yarn build      Build (output to ./lib)
    
    $ yarn postbuild  Copy sources or pre-built files to "lib" for publishing to npm. (Note: this will override built files)
    

    📖 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 ui-form-field

    DownloadsWeekly Downloads

    0

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    1.31 MB

    Total Files

    35

    Last publish

    Collaborators

    • ngduc