mui-form-fields

MUI Form Fields

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
    dividers
  >
    <FormTextField icon="person" name="name" label="Full Name"/>
    <FormTextField icon="mail" name="email" label="Email"/>
    <FormPhoneField name="phone" label="Phone"/>
    <FormDateField icon="today" name="birthday" label="Birthday"/>
    <FormSwitchField icon="security" name="protected" label="Protected"/>
    <FormSwitchField icon="verified_user" name="admin" label="Admin"/>
    <FormFileUploadField icon="attachment" name="identification" label="Social Security"/>
  </FormDialog>

Usage

We currently have the following FormFields available:

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

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

License

The files included in this repository are licensed under the MIT license.