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
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
