@dccs/react-formik-mui

react-formik-mui ·

Simple Formik <-> MaterialUI wrappers.

Here is a Demo:https://dccs-it-business-solutions.github.io/react-formik-mui/

Installation

You should install react-formik-mui with npm or yarn:

npm install @dccs/react-formik-mui

or

yarn add @dccs/react-formik-mui

This command will download and install react-formik-mui

Dependencies required by FormikTextField,-Select,-Switch,-Checkbox,-Radio

npm install formik
npm install @material-ui/core

Dependencies required by FormikDatepicker You can also look at the documentation of the MUI-Datepicker

npm install @material-ui/pickers
npm install @date-io/date-fns@latest
npm install date-fns@latest

Available Components

All MUI-Components are used inside of the renderfunction of a Formik-FastField.

• FormikTextField (Material UI TextField) - Renders a MUI-TextField
• FormikSelect (Material UI Select) - Renders a MUI-FormControl with a MUI-Select and a MUI-FormHelperText
• FormikCheckbox (Material UI Checkbox) - Renders a MUI-FormControlLabel with a MUI-Checkbox and a MUI-FormHelperText
• FormikRadio (Material UI Radiobutton) - Renders a MUI-FormControlLabel with a MUI-Radio and a MUI-FormHelperText
• FormikSwitch (Material UI Switch) - Renders a MUI-FormControlLabel with a MUI-Radio and a MUI-FormHelperText
• FormikDatepicker (Material UI Pickers KeyboardDatepicker) - Renders a MUI-KeyboardDatepicker
• FormikSlider (Material UI Slider) - Renders a MUI-FormControl with a MUI-Slider and a MUI-FormHelperText

How it works

Codesandbox with all components

More Examples:

FormikTextField

FormikTextField-Props are almost identical to Material-UI TextField Props The only difference is, that "name" is required.

    <FormikTextField  label="First Name"  name="firstName" />

    <FormikTextField label="Salary" name="salary" type="number" />

    <FormikTextField label="Multiline" name="multiline" multiline />

    <FormikTextField label="Helpertext" name="helpertext" helperText="Info" />

    <FormikTextField label="Error" name="error" error={true} helperText="Error" />

    <FormikTextField label="Variant Outline" name="outline" variant="outlined" />

    <FormikTextField label="Variant filled" name="filled" variant="filled" />

    <FormikTextField label="Password" name="password" type="password" />

    <FormikTextField
    	label="Input Adornments"
    	name="adornments"
    	InputProps={{
    		startAdornment: (
    			<InputAdornment  position="start">
    			<AccountCircle></AccountCircle>
    			</InputAdornment>
    		)
    	}}
    />

FormikCheckbox

FormikCheckbox-Props are almost identical to https://material-ui.com/api/checkbox/

It also accepts formControlLabelProps and formHelperTextProps.

<FormikCheckbox label="Checkbox" name="checkbox"></FormikCheckbox>

Label Placement

<FormikCheckbox
  label="Checkbox Bottom"
  name="checkboxBottom"
  formControlLabelProps={{ labelPlacement: "bottom" }}
/>

FormikSwitch

FormikSwitch-Props are almost identical to https://material-ui.com/api/switch/

It also accepts formControlLabelProps and formHelperTextProps.

Label Placement

<FormikSwitch
  label="Switch Bottom"
  name="switchBottom"
  formControlLabelProps={{ labelPlacement: "bottom" }}
/>

FormikSelect FormikSelect-Props are almost identical to https://material-ui.com/api/select/

It also accepts formControlProps and formHelperTextProps.

<FormikSelect
  label="Select"
  name="select"
  options={[
    { key: 1, value: "Entry 1" },
    { key: 2, value: "Entry 2" },
    { key: 3, value: "Entry 3" }
  ]}
/>

Without Label

<FormikSelect
  name="select2"
  options={[
    { key: 1, value: "Entry 1" },
    { key: 2, value: "Entry 2" },
    { key: 3, value: "Entry 3" }
  ]}
/>

FormikRadio

FormikRadio-Props are almost identical to https://material-ui.com/api/radio/

It also accepts formControlLabelProps and formHelperTextProps.

<FormControl>
  <FormLabel>Gender</FormLabel>
  <RadioGroup name="radioGroup">
    <FormikRadio label="Female" name="radioGroup" value="female" />
    <FormikRadio label="Male" name="radioGroup" value="male" />
    <FormikRadio label="Other" name="radioGroup" value="other" />
    <FormikRadio
      label="(Disabled option)"
      name="radioGroup"
      value="disabled"
      disabled
    />
  </RadioGroup>
</FormControl>

FormikDatepicker

FormikDatepicker-Props are almost identical to https://material-ui-pickers.dev/api/KeyboardDatePicker

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <FormikDatepicker name="date" label="Date"></FormikDatepicker>
</MuiPickersUtilsProvider>

Custom Components

For more information: https://jaredpalmer.com/formik/docs/api/fastfield

    <FastField
    	name="custom"
    	render={(fastFieldProps: FastFieldProps<any>) => (
    		<React.Fragment>
    			{/* Merge FastField-Props into Input */}
    			<input  {...fastFieldProps.field}  />

    			{/* Show Errormessage after Touch */}
    			{formikProps.touched.custom ? formikProps.errors.custom : null
    		</React.Fragment>
    	)}
    />

With HandleChange

<FastField
  name="custom2"
  render={(fastFieldProps: FastFieldProps<any>) => (
    <React.Fragment>
      {/* Merge FastField-Props into Input */}
      <input
        {...fastFieldProps.field}
        onChange={(e: React.ChangeEvent<any>) => {
          //Do stuff before HandleChange
          formikProps.handleChange(e);
          //Do stuff after HandleChange
        }}
      />
      {/* Show Errormessage after Touch */}
      {formikProps.touched.custom2 ? formikProps.errors.custom2 : null}
    </React.Fragment>
  )}
/>

Contributing

License

@dccs/react-formik-mui is MIT licensed