mui-form-fields

MUI Form Fields

Warning: this repository is currently to be officially released

Material UI + FinalForm Fields, packaged and ready to go! :package:

MUI Form Fields help you build beautiful material-ui components with the mninimal amount of code possible. This way you can keep focusing on your logic. :dart:

Installation

$ npm i --save mui-form-fields

This project also require the following peer dependencies:

Dependency	Version
@date-io/core	^1.3.6
@date-io/moment	^1.3.6
@material-ui/core	^4.1.0
@material-ui/icons	^4.1.0
classnames	^2.2.6
core-js	^3.1.3
css-vendor	^2.0.2
final-form	^4.13.1
is-plain-object	^3.0.0
jss	^9.8.7
moment	^2.24.0
react	>=16.8.6
react-dom	>=16.8.6
react-dropzone	^10.1.5
react-final-form	^6.0.1
react-text-mask	^5.4.3
text-mask-addons	^3.8.0

Install all of them via:

$ npm i --save @date-io/core @date-io/moment @material-ui/core @material-ui/icons classnames core-js css-vendor final-form is-plain-object jss moment react react-dom react-dropzone react-final-form react-text-mask text-mask-addons

Examples

This form:

is generated by this code:

  <FormDialog
    size="sm"
    title="Create User"
    onClose={() => console.log("close")}
    onSubmit={(...args) => console.log(args)}
    open
  >
    <FormTextField icon="person" name="name" label="Full Name"/>
    <Divider/>
    <FormTextField icon="mail" name="email" label="Email"/>
    <Divider/>
    <FormPhoneField name="phone" label="Phone"/>
    <Divider/>
    <FormDateField icon="today" name="birthday" label="Birthday"/>
    <Divider/>
    <FormSwitchField icon="security" name="protected" label="Protected"/>
    <Divider/>
    <FormSwitchField icon="verified_user" name="admin" label="Admin"/>
    <Divider/>
    <FormFileUploadField icon="attachment" name="identification" label="Social Security"/>
    <Divider/>
  </FormDialog>

Usage

We currently have the following FormFields available:

Component
<FormButtonField/>
<FormChipField/>
<FormDateField/>
<FormDateRangeField/>
<FormDateTimeField/>
<FormDialog/>
<FormField/>
<FormFileUploadField/>
<FormIntegerField/>
<FormMoneyField/>
<FormNumberField/>
<FormPercentageField/>
<FormPhoneField/>
<FormReadOnlyField/>
<FormShowField/>
<FormSwitchField/>
<FormTextField/>
<FormWeekField/>

Click on each of them to get more details about the usage of each of them.

License

TBD